title: Move links within a navbar
body: <p>Hey I have a navbar with a brand img in the middle but the image is bigger than the actual text in the links. I want to have the links )on both sides of the brand img) to line up with the middle of the brand (vertical halfway point) I tried playing with margin and padding but it doesn't seem to be doing the trick.</p>
  
  <p>HTML of Navbar:</p>
  
  <pre><code>&lt;div class="nav"&gt;
          &lt;div class="li"&gt;
              &lt;a class="nav-link" href="#"&gt;PHOTOGRAPHER&lt;/a&gt;
              &lt;a class="nav-link" href="#"&gt;PORTFOLIO&lt;/a&gt;
              &lt;a class="hplogo-a" href=""&gt;&lt;img class="hplogo-size" src="Images/Logo-Black - Copy.png" alt=""&gt;&lt;/a&gt;
              &lt;a class="nav-link" href="#"&gt;INVESTMENT + FAQ&lt;/a&gt;
              &lt;a class="nav-link" href="#"&gt;BLOG&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Related CSS (note I reset the container size and not the logo because when I did the logo there was empty space on both sides since the  was remaining the same):</p>
  
  <pre><code>.nav{
    list-style-type: none;
    overflow:hidden;
    display: inline;
  
  }
  .li{
    text-align: center;
  
  }
  .flex-container {
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    align-items: center;
  }
  
  .flex-item {
    margin: 5px;
  }
  .resize-anchor{
    display: inline-block;
    height: auto;
    width: 300px;
  }
  .hplogo-a{
    display: inline-block;
    height: auto;
    width: 200px;
  }
  a{
    display:inline-block;
    color:black;
    text-decoration: none;
    white-space: nowrap;
  }
  a:hover{
    color:#D1946F;
    text-decoration: none;
  }
  
  a:link{
    color:#D1946F;
    text-decoration: none;
  }
  .nav-link{
    margin:0px 10px 30px 10px;
    font-family: Calibri;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    line-height: 26.4px;
    padding: 0px 10px 0px 10px;
    margin-top: 20px;
  }
  </code></pre>