Twitter Bootstrap Remove Margin of the Span

css, twitter-bootstrap

Solution

That 20px margin you see on your `#mainContent` area is due to the setup of the bootstrap grid, which uses a container of `940px`, it is supposed to be removed by the `.row` container with a `margin-left:-20px` property. In your setup, your content area is working just the way it was designed too, but your top `pageHeader` and `mainNav` sections are not appropriately inserted into the grid, you just have divs inside the `.row` top sections that are not being contained within the proper containers of the grid.

To fix this you can just insert all of your `pageHeader` and `mainNav` elements inside a `.span12` container and everything should stack accordingly.

Fixed markup

<header class="row" id="pageHeader">
    <div class="span12">
        <div id="logo">Logo</div>
        <div id="userDetails">userDetails</div>
    </div>
</header>

<nav id="mainNav" class="row">
    <div class="span12">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="dashboard.html">Dashboard</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="idea_exchange.html">Idea Exchange</a></li>
        </ul>
    </div>
</nav>

Also, quick tip, you can switch your `mainNav` background color to the proper grid container of `.span12` simply by targeting it like so:

nav#mainNav .span12 {
    background: url("../images/nav_bar_bg.png") repeat-x scroll 0 0 transparent;
    height: 45px;
    overflow: hidden;
}

Problem

Original source