title: bootstrap nav is over the text
body: <p>I'm learning bootstrap and creating a website from scratch and currently I have problems with this example because the nav bar is over the text, What I want to do is to start the text after the nav bar.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- Navigation Menu--&gt;
   &lt;div class="container"&gt;
   &lt;nav class="navbar  navbar-inverse  navbar-fixed-top"&gt;
  
    &lt;button type="button" class="navbar-toggle"
    data-toggle="collapse"
    data-target=".navbar-collapse"
    &gt;
    &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;a class="navbar-brand" href="index.html"&gt;Testing Tool&lt;/a&gt;
         &lt;div class="navbar-collapse collapse"&gt;
             &lt;ul class="nav navbar-nav navbar-right"&gt;
               &lt;li class=""&gt;&lt;a href="transmissionpackage.html"&gt;Option 0&lt;/a&gt; &lt;/li&gt;
               &lt;li&gt; &lt;a href=""&gt;Option 1&lt;/a&gt; &lt;/li&gt;
             &lt;/ul&gt;
         &lt;/div&gt;
  
  &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;!-- Header --&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12"&gt;
                      &lt;img class="img-responsive" src="img/profile.png" alt=""&gt;
                      &lt;div class="intro-text"&gt;
                          &lt;h1 class="name"&gt;Start Bootstrap&lt;/h1&gt;
                          &lt;hr class="star-light"&gt;
                          &lt;span class="skills"&gt;Web Developer - Graphic Artist - User Experience Designer&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Expected result:</p>
  
  <ol>
  <li>NAV BAR</li>
  <li>SECOND CONTAINER</li>
  </ol>