title: Bootstrap css hides portion of container below navbar navbar-fixed-top
body: <p>I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width" /&gt;
  &lt;title&gt;Index&lt;/title&gt;
  &lt;link rel="stylesheet" href="~/stylesheets/bootstrap.css"/&gt;
  &lt;link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-fixed-top "&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
             &lt;button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button"&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 class="nav-collapse"&gt;&lt;ul class="nav" id="navbar"&gt;&lt;li ng-class="{active:section=='plunks'}" class="active"&gt;&lt;a href="/plunks/trending"&gt;&lt;i class="icon-home"&gt;&lt;/i&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a target="_self" href="/edit/"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;General Election 2014&lt;/a&gt;&lt;/li&gt;&lt;li class="divider-vertical"&gt;
                      &lt;/li&gt;&lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" href="#" data-toggle="dropdown"&gt;
                          &lt;i class="icon-eye-open"&gt;
                          &lt;/i&gt;Assembly Elections
                          &lt;b class="caret"&gt;&lt;/b&gt;
                          &lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#/HTML5Apps"&gt;Assembly Elections 2013&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                           &lt;/li&gt;&lt;li class="divider-vertical"&gt;
                      &lt;/li&gt;&lt;li ng-class="{active:section=='tags'}"&gt;&lt;a href="/tags"&gt;&lt;i class="icon-th"&gt;&lt;/i&gt;Constituecy&lt;/a&gt;&lt;/li&gt;&lt;li ng-class="{active:section=='discuss'}"&gt;&lt;a href="/discuss"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;Election News&lt;/a&gt;&lt;/li&gt;&lt;li class="divider-vertical"&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="https://github.com/filearts/plunker"&gt;&lt;i class="icon-bell"&gt;&lt;/i&gt;Candidate&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;
    &lt;div  class="container" &gt;
     &lt;ul class="nav nav-pills"&gt;
      &lt;li class="active"&gt;
      &lt;a href="#"&gt;Popular&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Trending&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Latest&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
  
      &lt;script src="~/Scripts/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/bootstrap-dropdown.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/Collapse.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>