I have placed two divs beneath the header and made it as fixed then my divs are not visible it is going inside the fixed. Kindly help me in this without using margin-top because if I want to use multiple divs after header it might not be correct.
var Deb = [];
$.noConflict();
jQuery(document).ready(function($) {
Deb.push(document.location);
});/*add*/
.nav>li>a:focus,
.nav>li>a:hover {
background: transparent!important;
}
body {
margin: 0;
padding: 0;
font: 400 14px/24px 'Open Sans', sans-serif;
}
#header {
float: left;
width: 100%;
position: relative;
}
.head-top {
float: left;
width: 100%;
position: fixed;
background: red;
z-index: 999;
}
#nav {
padding: 0;
margin: 16px 0 0 0;
list-style: none;
}
#nav li {
display: inline-block;
float: none;
position: relative;
padding: 0 0 20px 0;
}
#nav .active {
background: transparent;
}
#nav li a {
font: 400 14px/14px 'Lato', sans-serif;
color: #000;
text-transform: uppercase;
text-decoration: none;
padding: 0 20px;
display: block;
position: relative;
z-index: 20;
}
#nav li:hover>a {
background: none;
}
#nav li ul li a:hover,
#nav li ul li:hover>a {
text-decoration: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /><header id="header"><section class="head-top"><div class="container"><div class="row"><div class="col-md-6"><div class="left-side"><h1>sandeep</h1></div></div><div class="col-md-6"><div class="right-side"><nav class="navbar "><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button></div><div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav" id="nav"><li class="active"><a href="#" data-tab='main'>Home</a></li><li><a href="#aboutus" data-tab="aboutus">About</a></li><li><a href="#gallery" data-tab="gallery">Gallery </a></li><li><a href="#career" data-tab="career">career</a></li></ul></div></nav></div></div></div></div></section></header>