title: Navbar growing wider than bootstrap column width
body: <p>I am trying to position <code>navbar</code> fixed to the left-hand side of the screen effectively in a <code>sidebar</code> with the rest of the page content rendering to the right.</p>
  
  <p>Currently, I have tried to split the page into two using bootstrap columns like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    padding: 0;
    margin: 0;
    height: 100%;
  }
  
  
  /********************************************
  *                                           *
  *                                           *
  *               WRAPPERS                    *
  *                                           *
  *                                           *
  ********************************************/
  
  #sidebarWrapper {
    height: 100%;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background-color: red;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 0.5s ease;
  }
  
  
  /********************************************
  *                                           *
  *                                           *
  *             SIDEBAR NAV STYLE             *
  *                                           *
  *                                           *
  ********************************************/
  
  .sidebar-nav {
    margin: 0;
    padding: 0;
    top: 0;
    list-style: none;
    position: absolute;
  }
  
  .sidebar-nav&gt;li {
    display: inline-block;
    line-height: 20px;
    position: relative;
    width: 100%;
  }
  
  
  /********************************************
  *                                           *
  *                                           *
  *                  DIV STYLE                *
  *                                           *
  *                                           *
  ********************************************/
  
  .container-fluid {
    height: 100%;
  }
  
  .container-fluid h1 {
    padding: 0;
    margin: 0;
  }
  
  
  /********************************************
  *                                           *
  *                                           *
  *              PAGE BODY STYLE              *
  *                                           *
  *                                           *
  ********************************************/
  
  .header {
    height: 10%;
    background-color: yellow;
  }
  
  .contentBody {
    height: 80%;
    background-color: green;
  }
  
  .footer {
    height: 10%;
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-2"&gt;
        &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="sidebarWrapper"&gt;
          &lt;ul class="nav sidebar-nav"&gt;
            &lt;li&gt;
              &lt;a class="firstChild" href="/"&gt;Dashboard&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-10"&gt;
        &lt;div class="header"&gt;
          &lt;h1&gt;Header&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="contentBody"&gt;
          &lt;h1&gt;Content&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="footer"&gt;
          &lt;h1&gt;Footer&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, as you can see from the snippet my <code>navbar</code> seems to brute force over any bootstrap column restrictions and takes the width of the whole page.</p>
  
  <p>How can I prevent it from doing so, so that it takes 100% of the width of the bootstrap column but no more and no less?</p>