title: Overlapping rows in Twitter bootstrap
body: <p>I have got a problem with rows which are overlapping in this following code:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="navbar navbar-fixed-top  "&gt;
                      &lt;a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting"&gt;
                          Site.com
                      &lt;/a&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;NL&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;ENG&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;SP&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;&lt;h1&gt;This is my header&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="col-md-6"&gt;&lt;img src="img/MyPicture.JPG" height="300"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In my browser the last rows lies over the navbar. Could it be that it has got something to do with the second row being outside the container? If so where should I  define the container.</p>
  
  <p>Here is the jsfiddle text: <a href="http://jsfiddle.net/L9GJE/" rel="nofollow">http://jsfiddle.net/L9GJE/</a></p>