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 http://bit.ly/1cuTmtE.

Update:

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.

---

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.