title: Last element in nav not in center
body: <p>I have centered all text within the <code>li</code> tags but, for some reason, the last one is slightly closer to the bottom. Here is the code and the picture:</p>
  <p><img src="https://i.stack.imgur.com/FiZff.png" alt="Picture of result" /></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    *{
      margin:0;
      padding:0;
      box-sizing:border-box}
      
      #hamburgerClick{
          display:block;
             width:65px;
        height:65px;
        position: fixed;
        overflow: hidden;
        top:50px;
        left:50px;
        cursor: pointer;
        z-index:9999999999999;
      }
      header h1{
          width: 100%;
          text-align:center;
          color:white;
          background: #252525;
      }
      header{
          flex-direction: column;
          padding:0;
      }
      header ul{
          flex-direction: column;
          height:100%;
          width:100%;
          height:100vh;
  
           display:flex;
      list-style:none;
      transition: ease .8s;
      justify-content: space-between;
      }
  
      .ultog{
          transform: translateX(0%);
      }
      header ul li{
            text-align:center;
      width:6em;
      font-size: 1.1rem;
          box-sizing: border-box;
          width:100%;
          height: 100vh;
          background:#131313;
          color:white;
          border-top: 2px solid #252525;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size:2em;
          cursor: pointer;
          margin:0;
  
      }
      header ul li:nth-child(1){
          border: none;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="hamburgerClick"&gt;
          &lt;div id="hamburger"&gt;&lt;/div&gt;
          &lt;div id="hamburger2"&gt;&lt;/div&gt;
          &lt;div id="hamburger3"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
      &lt;header id="header"&gt;
          &lt;h1&gt;Photo21&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li&gt;Home&lt;/li&gt;
              &lt;li&gt;Products&lt;/li&gt;
              &lt;li&gt;Career&lt;/li&gt;
              &lt;li&gt;About us&lt;/li&gt;
              &lt;li&gt;Contact&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>