title: Nav Menu items hover padding ignore margins
body: <p>Interesting title I know, didn't know how else to word it. I'm trying to have my navigation bar items evenly spaced regardless of font type which will change the size slightly. I've included a :hover feature with will darken the background behind the items. This works well, however when I add margins or padding to the left and right of nav ul to indent the sides, the darkened area is omitted from the margin/padding space.</p>
  
  <p><a href="https://i.stack.imgur.com/UmjSY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UmjSY.png" alt="enter image description here"></a></p>
  
  <p>The first is how it looks with no 'nav ul' padding. The second is with it where the area is cut off and the third is how I'd like it to look (with the 'home' text more centered, this was a rough mspaint edit lol.</p>
  
  <p>On top of this, is there a way to make the padding for the 'header nav ul li a {' align perfectly so there's no space inbetween? I have a few px's space between where the hover occurs to allow for change in font-type without ruining the even spacing.</p>
  
  <p>Totally a beginner at both CSS and HTML so if you're going to help me please only offer your kindest beginner-friendly advice.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/c1y9axqt/" rel="nofollow noreferrer">https://jsfiddle.net/c1y9axqt/</a></p>
  
  <p>Relevant code:</p>
  
  <p>CSS</p>
  
  <pre><code>.container {
      width: 960px;
      padding: 0 10px;
      margin: 0 auto;
  }
  
  .nav_menu {
      background-color: #005073;
      background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
      background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
      background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
      background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
      -webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
      -moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4);  /* For Firefox 3.6 to 15 */
      box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
      border-style: solid;
      border-width: 1px;
      border-color: black;
      height: 26px;
  }
  
  
  
  nav ul {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content:space-between;
  }
  
  nav ul li{
      display: inline;
  }
  
  header nav ul li a {
      display: inline;
      padding: 6px 30px 6px 30px;
      letter-spacing: 1px;
      text-decoration: none;
      font-weight: bold;
      line-height: 26px;
      color: #EBEAEA;
      text-shadow:
      -1px -1px 1px rgba(0, 0, 0, .6),
      1px -1px 1px rgba(0, 0, 0, .6),
      -1px 1px 1px rgba(0, 0, 0, .6),
      1px 1px 1px rgba(0, 0, 0, .6); 
  
  }
  
  
  header nav ul li a:hover {
      color: #E1E0E0;
      background: rgba(0,0,0,0.2);
  }
  
  header nav ul li a:active {
      -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
      -moz-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
      box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
      color: #CECCCC;
     background: rgba(0,0,0,0.3);
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="container clearfix"&gt;           
          &lt;div class="nav_menu"&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Website Design&lt;/a&gt;&lt;/li&gt;           
                      &lt;li&gt;&lt;a href="#"&gt;Art &amp;amp; Poetry&lt;/a&gt;&lt;/li&gt;  
                      &lt;li&gt;&lt;a href="#"&gt;Blog &amp;amp; Other&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Music &amp;amp; More&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt;  
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt; &lt;!-- end of container--&gt;
          &lt;/div&gt; &lt;!-- end of navigator menu bar--&gt; 
   &lt;/header&gt;
  </code></pre>
  
  <p>JSFiddle  (again lol): <a href="https://jsfiddle.net/c1y9axqt/" rel="nofollow noreferrer">https://jsfiddle.net/c1y9axqt/</a></p>