Overlapping rows in Twitter bootstrap

Question

I have got a problem with rows which are overlapping in this following code:

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="navbar navbar-fixed-top  ">
                    <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
                        Site.com
                    </a>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="">Contact Us</a></li>
                        <li><a href="">NL</a></li>
                        <li><a href="">ENG</a></li>
                        <li><a href="">SP</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>


    <div class="row">
        <div class="col-md-6"><h1>This is my header</h1></div>
        <div class="col-md-6"><img src="img/MyPicture.JPG" height="300"></div>
    </div>

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.

Here is the jsfiddle text: http://jsfiddle.net/L9GJE/

Answer 1

Wrap <div class="row"> with a <div class="container">

e.g.

<div class="container">
   <div class="row">
      ....
   </div>
</div>

So whenever you use the navbar you'll need to keep in mind that it is fixed and you will need to add margin or padding from the top so your rows won't overlap.