title: Creating a fixed sidebar alongside a centered Bootstrap 3 grid
body: <p>I'd like to create a fixed sidebar that exists <strong>outside</strong> my centered Bootstrap Grid. The challenge I face when attempting to do this is determining what additional styles to apply/overwrite to my <code>.container</code> so that it doesn't overlap my sidebar when the screen is resized.</p>
  
  <p>For starters I'm only using the grid portion of the css framework so the <code>.container</code>, <code>.row</code> and <code>.col-md-12</code> is code pulled from the <code>bootstrap.css</code> file itself and is not custom. Also keep in mind I'm using <strong>Bootstrap 3</strong>, so please, no suggestions for a fluid grid solution for Bootstrap 2 that is often asked about in previous threads.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="left-nav"&gt;&lt;/div&gt;
  &lt;div class="container"&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
           &lt;p&gt;Lorem ipsum dolor sit amet, nunc dictum at.&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
    height: 100%;
    width: 100%;
  }
  #left-nav {
    background: #2b2b2b;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 250px;
  }
  </code></pre>