title: WordPress menu problems
body: <p>I'm making a WordPress theme and I'm using the default menu structure on the .php file:</p>
  <pre><code>&lt;nav id=&quot;menu&quot; role=&quot;navigation&quot;&gt;
           &lt;!--  &lt;div id=&quot;search&quot;&gt;
               &lt;?php get_search_form(); ?&gt;
           &lt;/div&gt; --&gt;
       &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'main-menu' ) ); ?&gt;
   &lt;/nav&gt;
  </code></pre>
  <p>But when I get to the CSS I can't make the elements 100% height inside the nav element, which I gave 80px.</p>
  <p>This is my CSS:</p>
  <pre><code>#menu {
  height: 80px;
  background-color: aquamarine;
  }
  
  .menu {
  height: 80px;
  }
  
  #menu ul {
  margin: 0;
  padding: 0;
  height: 100%;
  list-style-type: none;
  list-style-image: none;
  }
  
  #menu li {
  height: 100%;
  font-weight: bold;
  font-size: 1em;
  float: left;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  
  .menu ul li a {
  height: auto;
  text-decoration: none;
  display: block;
  padding: 30px;
  color: white;
  -webkit-transition: background-color 600ms ease-out;
  -moz-transition: background-color 600ms ease-out;
  -o-transition: background-color 600ms ease-out;
  transition: background-color 600ms ease-out;
  }
  
  .menu ul li a:hover {
  background: #0f5972;
  }
  </code></pre>
  <p>see the little border top and bottom?<br />
  <a href="https://i.stack.imgur.com/aFblZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aFblZ.png" alt="see the little border top and bottom?" /></a></p>