title: Want to have Nav-Item be same height as Nav-Bar
body: <p>I am using Bootstrap 4 and trying to make a nav-item have the same height as my navbar so that when I add background-color to it it looks like a stripe through the nav-bar. </p>
  
  <p>Initially the item was centered and left space on top and below. I added negative margin to get it up against the top but the same didn't work when I tried to add "margin-bottom" </p>
  
  <p>I then tried fixing the height of the navbar but when I did that and clicked on the toggle to bring down the navbar items they didn't show up because the fixed height prevented it from appearing. </p>
  
  <pre><code>&lt;body&gt;
  &lt;nav class="navbar navbar-dark bg-dark text-center"&gt;
      &lt;div class="container"&gt;
          &lt;div class="mr-auto order-0" class= "d-flex align-items-stretch"&gt;
              &lt;a class="navbar-brand ml-auto" style="background-color:red; line-height: 58px; margin-top:-9px; padding: 0 20px 0 20px;" class="nav-item active" href="#"&gt;Matthew Krebs&lt;/a&gt;           
          &lt;/div&gt;
          &lt;a class="navbar-brand text-center" href="#"&gt;&lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
              aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
              &lt;ul class="navbar-nav ml-auto mx-auto"&gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="#"&gt;Home
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/body&gt;
  </code></pre>