Overlapping rows in Twitter bootstrap - css

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>Contact Us</li>
<li>NL</li>
<li>ENG</li>
<li>SP</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.

Answer 2

Your navbar is fixed, so, you need to add margin-top to second row.

Answer 3

Your navbar was not made correctly, here is the correct usage of the navbar class:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>This is my header</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>