title: Why isn't ul using full nav's height?
body: <p>I'm having some problems creating a header.
  <a href="https://imgur.com/a/qxnzusq" rel="nofollow noreferrer">Here</a>, my ul is not using the full height of the nav, but the nav IS using the full height of the header.
  I want to fix this in order to center vertically the text.
  Thank you.</p>
  <p>(edit) When I use <code>height: 100%;</code> on the ul, <a href="https://imgur.com/a/c6vnrun" rel="nofollow noreferrer">this</a> happens.</p>
  <p>This is my HTML:</p>
  <pre><code> &lt;header&gt;
          &lt;div class=&quot;logo&quot;&gt;
              &lt;img src=&quot;img/logo.png&quot;/&gt;
          &lt;/div&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;WORKS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  </code></pre>
  <p>This is my SASS:</p>
  <pre><code>$BLACK:#000;
  $WHITE:#fff;
  
  * {
      box-sizing: border-box;
  }
  
  header {
      width: 100%;
      height: 75px;
      background-color: $BLACK;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
  
      .logo {
          width: 50%;
          display: flex;
          align-items: center;
          padding-left: 50px;
      }
  
      nav {
          width: 50%;
          padding-right: 50px;
  
          ul {
              list-style-type: none;
              display: flex;
              flex-flow: row wrap;
              justify-content: right;
  
              li {
                  display: inline-block;
                  margin-left:50px;
  
                  a {
                      text-decoration: none;
                      color: $WHITE;
                  }
              }
          }
      }
  }
  </code></pre>