bootstrap-3-x-check-margin-css
<div class="col-md-8" >
<nav class="navbar nav-wrapper" role="navigation" data-margin="zero">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#first">
<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 class="collapse navbar-collapse" id="first" style="padding:0;">
<ul class="nav main-menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu pull-left" role="menu">
<li role="presentation"><a href="">Lorem Ipsum</a></li>
<li role="presentation"><a href="">Lorem Ipsum</a></li>
<li role="presentation"><a href="">Lorem Ipsum</a></li>
<li role="presentation"><a href="">Lorem Ipsum</a></li>
<li role="presentation"><a href="">Lorem Ipsum</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-----/collapse navbar-collapse-------------------------->
</nav>
</div><!-------/col-md-8--------------->
@import url(http://fonts.googleapis.com/css?family=Fjalla+One|PT+Sans+Narrow:400,700);
*{position : relative;}
*, *:before, *:after{
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
/*********************************************
/* Colors
*********************************************/
$orange :#ff9070;
/* TEXT COLOR*/
[data-txt-color="light-orange"]{
color : #ff9070;
color: rgb(255,144,112);
}
[data-txt-color="light-cream"]{
color : #ffb652;
color: rgb(255,182,82);
}
[data-txt-color="black-no-black"]{
color: #222222;
color: rgb(34,34,34);
}
[data-txt-color="husky-white"]{
color : #e9e7e6;
color: rgb(233,231,230);
}
/* BG COLOR*/
[data-ag-color="light-orange"]{
background : #ff9070;
background-color: rgb(255,144,112);
}
[data-ag-color="light-cream"]{
background : #ffb652;
background-color: rgb(255,182,82);
}
[data-ag-color="black-no-black"]{
background : #222222;
background-color: rgb(34,34,34);
}
[data-ag-color="husky-white"]{
background : #e9e7e6;
background-color: rgb(233,231,230);
}
/***********************************************
/* Margins
***********************************************/
[data-margin="twenty-top"]{
margin-top: 20px;
bottom : 0;
}
[data-margin="twenty-bot"]{
top: 0;
margin-bottom: 20px;
}
[data-margin="zero"]{
top: 0;
margin: 0px;
}
/***********************************************
/* Typography
**********************************************/
h1, h2, h3, h4, h5{
font-family: 'Fjalla One', sans-serif;
}
p{
font-family: 'PT Sans Narrow', sans-serif;
font-size : 16px;
line-height : 1.48;
}
body{
font-family: 'PT Sans Narrow', sans-serif;
}
.uppercase{
text-transform: uppercase;
}
/*****************************************************
/* Header
*****************************************************/
.header-wrapper{
width: 100%;
display : block;
min-height : 0px;
margin: 0;
padding: 0;
}
.header-wrapper .logo-wrapper{
background : #ffb652;
padding: 0.67em 0 0 ;
padding: 10px 0 0;
margin : 0;
display: block;
vertical-align:top;
}
.header-wrapper .nav-wrapper{
padding : 0;
margin: 0;
display: block;
background : #F0F0F0;
}
.main-menu{
margin:0;
padding-left : 0;
list-style : none;
vertical-align:baseline;
bottom: 0;
}
.main-menu > li{
display: inline-block;
*display : inline;
float : left;
border-right:#DADADA 1px solid;
}
.main-menu > li > a{
text-align: center;
text-transform : uppercase;
padding : 8px 15px;
line-height: 2em;
text-decoration : none;
font-size: 1rem;
font-size: 16px;
}
.navbar-toggle{
background: #fff;
}