Twitter Bootstrap Quitar Margen del grupo

Que 20px margen de lo que ves en tu #mainContent área es debido a la configuración de la rejilla bootstrap, que utiliza un contenedor de 940px, se supone que debe ser eliminado por el .row envase con un margin-left:-20px de la propiedad. En su configuración, su área de contenido está funcionando de la forma en que fue diseñado, pero su parte superior pageHeader y mainNav secciones no están adecuadamente insertados en la red, usted sólo tiene divs dentro de la .row superior de las secciones de las que no están contenidos dentro de los contenedores apropiados de la red.

Para solucionar esto sólo puede insertar todos los de su pageHeader y mainNav elementos dentro de una .span12 contenedor y todo debe de pila en consecuencia.

Fijo marcado

<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>

También, sugerencia, puedes cambiar tu mainNav color de fondo para el correcto cuadrícula contenedor de .span12 simplemente por la orientación es tal que así:

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