title: CSS background color not full height of li
body: <p>I have a navigation bar on top of my page created by ul and li elements. Now however when I make my screen smaller, suddenly I have a height problem. I show you in the picture.<a href="https://i.stack.imgur.com/albmZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/albmZ.png" alt="enter image description here"></a></p>
  
  <p>As you see because one of the items height is bigger, it is not filling up the full space.</p>
  
  <p>How can I fix this, I tried everything, height 100% and so on, but it won't fix.
  I give you the CSS, because the html is just ul and li elements.</p>
  
  <pre><code>ul {
      list-style-type: none;
      padding: 0;
      margin-top: 10px;
      overflow: hidden;
      background-color: #6b3a8d;
  }
  
  li {
      float: left;
      width: 20%;
      height:100%;
  }
  
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      cursor: pointer;
      height: 100%;
  }
  
  
  
  
  li:hover {
      background-color: rgba(42,23,55,0.2)
  }
  
  
  .activated {
  
      background-color: #1ABFB4;
  }
  
  .activated:hover{
      background-color: rgba(26,191,180,0.9);
  }
  
  .nocopy{
      -webkit-user-select: none;  /* Chrome all / Safari all */
      -moz-user-select: none;     /* Firefox all */
      -ms-user-select: none;      /* IE 10+ */
      user-select: none;          /* Likely future */
  }
  </code></pre>