title: Using twitter bootstrap to create sidebar in master-detail UI
body: <p>Using twitter bootstrap, I am trying to create a sidebar in a master-detail UI with the code below. The problem is that the sidebar is always appearing right above the main content or details section as shown in the image below. Any suggestions on fixing this will be helpful. thanks.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
     &lt;div class="navbar navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
         &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row-fluid"&gt;
       &lt;ul class="nav nav-list span3 well pull-right"&gt;
        &lt;li&gt; &lt;a href="#"&gt; Home &lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="/posts"&gt; Post &lt;/a&gt; &lt;/li&gt;
       &lt;/ul&gt;
  
      &lt;div class="span9 well"&gt;
  
      &lt;/div&gt;
  
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the only custom CSS used:</p>
  
  <pre><code> body{padding: 60px 10px 10px 10px;}
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/WcqAj.jpg" alt="enter image description here"></p>
  
  <p><strong>Solved</strong></p>
  
  <p>What caused my problem was that, my &lt;<strong>div class="container-fluid"</strong>> was not wrapped with an outer row class eg &lt;<strong>div class="row-fluid"</strong>>. Once I did that, everything was fine. </p>