title: In Bootstrap 4, How to remove the gap between navbar and toggle menu item?
body: <p>With Bootstrap 4, there comes the default navbar template. I used that for learning, But, when i try to modify or style the css, i am going crazy. I dont understand what is causing the gap between navbar and toggle menu item?</p>
  
  <p>I'm trying remove the gap, But, It difficult achieve, what I am looking for. Here is the Image : <a href="https://i.stack.imgur.com/hDs8j.jpg" rel="nofollow noreferrer">Gap-img</a></p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt; &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar navbar-expand-md navbar-inverse navbar-fixed-top" role = "navigation"&gt;
      &lt;div class="navbar-header"&gt;   
  &lt;a class="navbar-brand" href="#"&gt;
      &lt;img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Boostrap_logo.svg" width="22" height="22" class="d-inline-block align-top" alt=""&gt;
      Bootstrap
    &lt;/a&gt;
          &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
  &lt;!--         &lt;button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-x"&gt; --&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown-divider"&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;section&gt;
      &lt;div class="container"&gt;
        &lt;div id="about"&gt;
          &lt;h1&gt;My title&lt;/h1&gt;
          &lt;p&gt;Hello World. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium error tempore voluptas iusto. Deleniti impedit repellendus mollitia ad, repudiandae ab fugit ipsa in laboriosam culpa, aspernatur amet quo modi possimus.&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ea assumenda, soluta natus culpa debitis perspiciatis repudiandae doloremque eum repellendus fugiat corrupti aspernatur accusamus neque laborum totam voluptates error possimus.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  &lt;/body&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/html&gt;`
  
  
  
  
  .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
  }
  
  .nav-item{
     height:49px;
        margin-top: 0px;
        margin-bottom: 0px;
          padding-top:0px;
          padding-bottom:0px;
  }
  
  /*  */
  .navbar-default,
  .navbar-inverse {
    /* SET color for top bar*/
    background-color: darkblue;
    margin-bottom:20px;
  }
  
  .navbar-toggle {
    border: 0px;
    border-radius: 0px;
    padding: 18px;
    margin: 0px;
    background-color: rgba(0, 0,200, 0.5);
    outline: none;
  }
  
  .navbar-toggle .icon-bar:nth-of-type(1) {
    height: 2px;
    top: 1px;
  }
  .navbar-toggle .icon-bar:nth-of-type(2) {
    height: 2px;
    top: 0.9px;
  }
  .navbar-toggle .icon-bar:nth-of-type(3) {
    height: 2px;
    top: 0.7px;
  }
  </code></pre>
  
  <p>Can somebody help me out?</p>