title: Hover does not cover entire text
body: <p>I am trying to get the hover to extend all the way across to both sides of the sub-menu. I've tried to rewrite a bunch of elements to no avail. I also used chrome developer tools to try and pin-point the issue. After using chrome dev tools, it seemed like the issue regarding the hover not covering the entire text was with the padding in nav ul li a{. I tried to alter the padding and margin but without success. I've just started coding within the past year and I am a complete loss here.</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
        &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
          &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;title&gt;WEBSITE&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;/head&gt;
      &lt;body&gt;
        &lt;nav&gt;
          &lt;div class=&quot;logo&quot;&gt;
      WEBSITE&lt;/div&gt;
      &lt;label for=&quot;btn&quot; class=&quot;icon&quot;&gt;
          &lt;span class=&quot;fa fa-bars&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;btn&quot;&gt;
        &lt;ul&gt;
      &lt;li&gt;
            &lt;label for=&quot;btn-1&quot; class=&quot;show&quot;&gt;ABOUT +&lt;/label&gt;
            &lt;a href=&quot;#&quot;&gt;ABOUT&lt;/a&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;btn-1&quot;&gt;
            &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;OUR STORY&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;OUR COMMITMENT TO YOU&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;LOCATIONS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
            &lt;label for=&quot;btn-2&quot; class=&quot;show&quot;&gt;PRODUCTS +&lt;/label&gt;
            &lt;a href=&quot;#&quot;&gt;PRODUCTS&lt;/a&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;btn-2&quot;&gt;
            &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;NEW ARRIVALS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;FEATURED&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;TOP RATED&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;HIS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;HERS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;KIDS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ACCESSORIES&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;SPRING CATALOG&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;THE ESSENTIALS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;SALE&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;BLOG&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;hr class=&quot;hr&quot;&gt;
      &lt;div class=&quot;content&quot;&gt;
        &lt;section&gt;
          &lt;img class=&quot;image&quot;src=&quot;Vibrant.jpg&quot; alt=&quot;Human Jumping In Converses&quot;&gt;
        &lt;/section&gt;
      &lt;/div&gt;
        &lt;/body&gt;
       &lt;/html&gt;
      
          *{
          font-family: sans-serif;
          margin: 0;
          padding: 0;
          user-select: none;
          }
          body{
          background: #f2f2f2;
          }
          nav{
          background: white;
          }
          nav:after{
          clear: both;
          content: '';
          display: table;
          }
          nav .logo{
          color: black;
          float: left;
          font-family: sans-serif;
          font-size: 30px;
          font-weight: 500;
          line-height: 70px;
          padding-left: 120px;
          }
          nav ul{
          float: right;
          list-style: none;
          margin-right: 60px;
          position: relative;
          }
          nav ul li{
          background: white;
          display: inline-block;
          text-align: center;
          }
          nav ul li a{
          color: rgb(77, 77, 77);
          display: inline-block;
          font-size: 15px;
          line-height: 70px;
          margin: 1px;
          padding: 0 20px;
          text-decoration: none;
          }
          nav ul li a:hover{
          background-color: rgb(0, 153, 102);
          color: black;
          }
          nav ul ul li a:hover{
          background: rgb(0, 92, 61);
          color: white;
          }
          nav ul ul{
          background-color: rgb(0, 153, 102);
          opacity: 0;
          position: absolute;
          visibility: hidden;
          }
          nav ul ul ul{
          border-top: none;
          }
          nav ul li:hover &gt; ul{
          opacity: 1;
          top: 70px;
          visibility: visible;
          }
          nav ul ul li{
          background-color: rgb(0, 153, 102);
          display: list-item;
          font-weight: lighter;
          float: none;
          position: relative;
          width: 100%;
          padding: 0;
          }
          nav ul ul li a{
          color: white;
          line-height: 50px;
          }
          nav ul ul ul li{
          left: 150px;
          position: relative;
          top: -60px;
          width: 100%;
          }
          .show,.icon,input{
          display: none;
          }
          .fa-plus{
          font-size: 15px;
          margin-left: 40px;
          }
          .image{
          height: 1100px;
          width: 2200px;
          }
          .hr{
          background-color: rgb(0, 153, 102);
          border: none;
          height: 9px;
          }
          @media all and (max-width: 968px) {
            nav ul{
            float: left;
            margin-right: 0px;
            }
            .show + a, ul{
            display: none;
            }
            nav ul li,nav ul ul li{
            display: block;
            width: 100%;
            }
            nav ul li a:hover{
            box-shadow: none;
            width: 100%;
            }
            .show{
            color: rgb(0, 153, 102);
            cursor: pointer;
            display: block;
            font-size: 18px;
            line-height: 70px;
            padding: 0 10px;
            }
            .show:hover{
            color: black;
            }
            .icon{
            background-color: black;
            color: rgb(0, 153, 102);
            cursor: pointer;
            display: block;
            font-size: 25px;
            line-height: 70px;
            position: absolute;
            right: 40px;
            top: 0;
            }
            nav ul ul{
            border-top: 0px;
            top: 70px;
            float: none;
            position: static;
            display: none;
            opacity: 1;
            visibility: visible;
            }
            nav ul ul a{
            padding-left: 40px;
            }
            nav ul ul ul li{
            position: static;
            }
            .content{
            z-index: -1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            }
  </code></pre>