title: bootstrap nav bar overlapping div label
body: <p>I've been playing around with this for a while and thought it's time to seek help. 
  I have a container and within it there is a link and below the link there is a label and below that is the nav bar. 
  I tried a few of the settings but haven't been able to get it right. 
  For a moment I thought I had it.</p>
  
  <p>[EDITED] Here is the code that i've been mucking around: </p>
  
  <pre><code>  &lt;div style=" background-color:#f0f0f1; width:inherit;"&gt;
          &lt;div class="container"&gt;
          &lt;!--Page Title Section --&gt;
  
              &lt;div class="container"&gt;
                  &lt;div style="float:left;"&gt;
                      &lt;br /&gt;
                      &lt;a href="#"&gt;Back to Link&lt;/a&gt;
                      &lt;p class="pagelabelspacer"&gt;
                          &lt;asp:Label ID="PageTitleLabel" CssClass="pageTitle" runat="server"&gt;Page Title.&lt;/asp:Label&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /.container-collapse --&gt;
          &lt;/div&gt;
  
          &lt;!--End Page Title Section--&gt;
  
          &lt;!--Nav Bar --&gt;
  
          &lt;div class="container"&gt;
  
              &lt;nav class="navbar navbar-inverse navbar-default"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;    
              &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
          &lt;!--End Nav Bar --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>[EDITED] My questions:</p>
  
  <ol>
  <li><p>How do i get the nav bar not to overlap the link and label?
  [My answer -> just put it in another container and it works]</p></li>
  <li><p>On nav-default the height of the nav bar seems exaggerated (i.e. too high). Is there a way to change it (e.g. setting a specific pixel height)?</p></li>
  <li><p>Is there a way to override the default nav bar color? </p></li>
  </ol>
  
  <p>I'll continue playing with it to try to get it working.
  Any suggestions and advice are greatly appreciated. 
  thanks!</p>