html - unwanted space between navigation bar and div(red color) -

i getting unwanted space between red color div , header html i've give 0 value margin , padding html , body.but still there's problem please help

 <header>      <nav role="navigation" class="navbar navbar-fixed navbar-inverse">      <!-- brand , toggle grouped better mobile display -->      <div class="navbar-header">          <button type="button" data-target="#navbarcollapse" data-toggle="collapse" class="navbar-toggle nav-button">              <span class="sr-only">toggle navigation</span>              <span class="icon-bar"></span>              <span class="icon-bar"></span>              <span class="icon-bar"></span>         </button>         <a href="#" class="navbar-brand">example</a>     </div>      <!-- collection of nav links , other content toggling -->      <div id="navbarcollapse" class="collapse navbar-collapse">          <ul class="nav navbar-nav nav-ul">             <li id="tech" class="nav-list">         <a href="#">home</a></li>            <li id="politics" class="nav-list">     <a href="#">careers</a></li>            <li id="crime" class="nav-list">        <a href="#">about</a></li>            <li id="business" class="nav-list">     <a href="#">contact</a></li>           </ul>      </div>      </nav>  </header>  <section class="frontpage">     <div class="container">         <div class="row">               <div class="col-md-5">                </div>          </div>      </div> </section> <section class="ghi">     <div class="container">         <div class="row">               <div class="col-md-5">                </div>          </div>      </div> </section> 

and css i've tried giving 0 padding , margins div , header

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

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;  }

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />    <header>        <nav role="navigation" class="navbar navbar-fixed navbar-inverse">        <!-- brand , toggle grouped better mobile display -->        <div class="navbar-header">            <button type="button" data-target="#navbarcollapse" data-toggle="collapse" class="navbar-toggle nav-button">                <span class="sr-only">toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>          </button>          <a href="#" class="navbar-brand">example</a>      </div>        <!-- collection of nav links , other content toggling -->        <div id="navbarcollapse" class="collapse navbar-collapse">            <ul class="nav navbar-nav nav-ul">               <li id="tech" class="nav-list">         <a href="#">home</a></li>             <li id="politics" class="nav-list">     <a href="#">careers</a></li>             <li id="crime" class="nav-list">        <a href="#">about</a></li>             <li id="business" class="nav-list">     <a href="#">contact</a></li>              </ul>        </div>        </nav>    </header>    <section class="frontpage">      <div class="container">          <div class="row">                <div class="col-md-5">                  </div>            </div>       </div>  </section>  <section class="ghi">      <div class="container">          <div class="row">                <div class="col-md-5">                  </div>            </div>       </div>  </section>