How To Left Align the Title Using CSS

Tags: html,css

Problem :

I am developing a theme on my website using Thesis 2. I just modified the classic responsive theme.

I created an id using the div tag called "header-middle-sub". And here's the code that I used:

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    width: 897px;

It works great on a browser using a desktop. But since it is responsive theme, when I open the site in a tablet or mobile phone, the width occupies a fixed 897px.

If I remove this line width: 897px; the title is centered on the screen. So what is the code to retain the position of the title?

BTW, here's my website


Can anyone please visit my site and use the "inspect element" of chrome or firefox?

Here's the CSS of my header section:

.header {
    margin: 0 auto;
    padding: 0px;
    background-color: #C4C4C4;

#header-top {
    background-color: #7ED7F2;

#header-middle {
    background-color: #6699CC;
    border-bottom: 5px solid #0f3158;
    border-top: 2px solid #0F3158;
    padding: 20px 0 20px 0;

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    width: 897px;

#header-bottom {
    background-color: #0099CC;

#header-container {
    display: table;
    margin: 0 auto;

Here's the layout on my theme using thesis 2.

enter image description here

Solution :

It doesn't work for desktop too! Make your browser window very small and you will see the horizontal scrollbar. The width is always fixed.

To avoid this behavior, use the following css code:

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    max-width: 897px;
    width: 100%;

Now, it will always try to stretch the div over the whole browser window, but the max-width restricts it to 897px, but less is possible, and less will be used on mobile phones or when you resize your browser window.

    CSS Howto..

    How can I force clients to refresh JavaScript/CSS files rendered with Jade in Node.js?

    How to make scrollable table's header fixed using css fixed position property?

    How to give the a specific background color in CSS?

    How to Style this table-like structure

    How to proper align after CSS column-count

    how to move css element with scrolling left with Jquery?

    How to target multiple table rows with a single CSS rule?

    How to size this text with css?

    How to install CSS templates with Flask?

    How to make text vertical in a jQuery UI Layout toggler?

    How Do I Add product descriptions (short) to hover box in woocommerce?

    How do you change the background opacity in CSS?

    How to show only a portion of an image just by using the img tag?

    How to remove underline in css for anchors pseudo element in IE

    Ext JS 4.2 - How to create a header like the one at KitchenSink sample?

    CSS how can I add border also to triangle? [duplicate]

    How can I add CSS to grandchild pages in an unordered list on Wordpress?

    How do i add a background image to my header?

    How to display a div as overlay which is hovered by a div which is inside another div?

    How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

    How to align a div to lower left corner in css

    How to get position of div inside td

    How to set hyphenation at the end of word when to break word in CSS?

    How can I avoid CSS delay in Rails 3.2

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    How to add far-future expires headers to minified cssfiles/scripts?

    How is struts finding css files?

    How to make a hidden border side inherit border properties in CSS

    How to use CSS to style 4 blocks of Info in the homepage?

    How to distinct classes in CSS using Javascript