title: trying to align nav links with logo in bootstrap 4
body: <p>I am having issues with aligning my navigation links with my logo. Currently, my logo is in the center of my navigation and the links for some reason are displaying above my logo rather than next to it. the image below shows my issue<a href="https://i.stack.imgur.com/XnKzZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XnKzZ.png" alt="enter image description here"></a></p>
  
  <p>I am trying to get it to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/lu45w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lu45w.png" alt="enter image description here"></a></p>
  
  <p>here is my header code:</p>
  
  <pre><code>  &lt;header id="header" role="banner"&gt;
              &lt;div class="header-inner"&gt;
                  &lt;nav class="navbar"&gt;
                      &lt;div class="container text-xs-center"&gt;
                          &lt;div class="navbar-nav"&gt;
                              &lt;a href='{{ url("/") }}' class="nav-item-link nav-item nav-link"&gt;Home&lt;/a&gt;
                              &lt;a href="#" class="nav-item-link nav-item nav-link"&gt;Our Team&lt;/a&gt;
                              &lt;a href="#" class="nav-item-link nav-item nav-link"&gt;Media&lt;/a&gt;
                              &lt;a href='{{ url("/") }}' class="nav-item nav-link"&gt;&lt;img src="./images/zipzap.jpg" class="img-fluid" alt=""&gt;&lt;/a&gt;
                              &lt;a href="#" class="nav-item-link nav-item nav-link"&gt;About Us&lt;/a&gt;
                              &lt;a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link"&gt;Contact Us&lt;/a&gt;
                              &lt;a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate"&gt;Support Us&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/header&gt;
  </code></pre>
  
  <p>and my css:</p>
  
  <pre><code>a.nav-item{
      color:#000;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight:bold;
      padding:20px;
  }
  
  a.nav-item:hover{
      color:#000;
  }
  
  a.nav-item:hover{
      color:#000;
  }
  
  .navbar-nav{
      display:inline-block;
  }
  
  #donate{
      background-color: #7ED321;
      border-radius: 8px;
      padding: 15px;
  }
  
  #header{
      width:100%;
  }
  
  .header-inner{
      padding: 18px 0;
      width:100%;
  }
  </code></pre>
  
  <p>any help would be appreciated!</p>