Unwanted Space Between Navigation Bar And Div(red Color)

I am getting an unwanted space like this between red color div and header my html is i've give 0 value for margin and padding for html and body.But still there's a problem please h

Solution 1:

use it

.navbar{
       margin-bottom: 0!important;
    }

body,html {}
header{}  
.frontpage{
 background:red;
   height:200px;       
}
.ghi{
  background:blue;
height:220px;
}

.navbar{
   margin-bottom: 0!important;
}

<linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /><header><navrole="navigation"class="navbar navbar-fixed navbar-inverse"><!-- Brand and toggle get grouped for better mobile display --><divclass="navbar-header"><buttontype="button"data-target="#navbarCollapse"data-toggle="collapse"class="navbar-toggle nav-button"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref="#"class="navbar-brand">Example</a></div><!-- Collection of nav links and other content for toggling --><divid="navbarCollapse"class="collapse navbar-collapse"><ulclass="nav navbar-nav nav-ul"><liid="tech"class="nav-list"><ahref="#">home</a></li><liid="politics"class="nav-list"><ahref="#">careers</a></li><liid="crime"class="nav-list"><ahref="#">about</a></li><liid="business"class="nav-list"><ahref="#">contact</a></li></ul></div></nav></header><sectionclass="frontpage"><divclass="container"><divclass="row"><divclass="col-md-5"></div></div></div></section><sectionclass="ghi"><divclass="container"><divclass="row"><divclass="col-md-5"></div></div></div></section>

Solution 2:

It is because the Browser is adding default margins to the ul Elements. Add this style to your css and it should fix the issue:

ul.nav { margin-bottom: 0!important; }

Solution 3:

Just in case someone else have same problem. I fixed it based on reading https://css-tricks.com/fighting-the-space-between-inline-block-elements/ in my case just added this line margin-bottom: -10px;