CSS: How to fix overlapping divs - html

Question

I am using bootstrap to create a web site.
Here is the code for navbar
Edit: Fiddle http://jsfiddle.net/cb6rxu2h/
<header>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header col-md-4 col-sm-12">
<a class="navbar-brand" href="#">BargainKart</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="badge pull-right">4</span><i class="fa fa-shopping-cart"></i>
</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in"></i>
Sign in</a></li>
</ul>
</div> <!--container fluid-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>About</li>
<li class="dropdown">
Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Electronics</li>
<li>Fashion</li>
<li role="separator" class="divider"></li>
<li>All</li>
</ul>
</li>
</ul>
<div class="col-sm-6 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
</div><!-- /.navbar-collapse -->
</nav>
</header>
And the code for sidebar
<div class="wrapper">
<aside>
<div class="categories-bar content-fluid col-md-3 col-sm-12">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>About</li><li class="active">Home</li>
<li>About</li><li ">Home</li>
<li>About</li> <li>Shop</li>
</ul>
</div>
</aside>
The css I've used is
aside {
padding-bottom: 5000px;
margin-bottom: -5000px;
background-color: white;
font-size: 1.5em;
}
.wrapper {
position: relative;
overflow: hidden;
}
I've messed up a lot but still can't figure out why the sidebar and wrapper div is overlapping into header.
I can use padding but when I scale the browser there's lot of empty space for small screen browsers.

Answer 1

Since you use the navbar-fixed-top giving the body a padding of the navbars height should fix this problem. Replace XX with your value of the height in pixels.
body {
padding-top: XXpx;
}
You can get this tip here.