Navigation Links Hover Effects: color all the way to the edge of the menus

Hi y'all, 

I have this code currently on my website 

.header-nav-item a:hover {
      background: black! important;
    color: white !important;
     
}

which makes the background of my navigation links black and the text white when I hover over them, but the problem is I can't figure out how to add spacing on either side of the word so that the color goes to the edge of the drop down navigation menu. 

It's a little hard to see because the video in the background is black and white, but I don't want that "step" between impact and the drop down menu. 

Thank you for your help!

Hey @clementinedesigner. That’s very easy to do. Just replace your code with the one I provided below. To adjust the padding, play around with the px values:

.header-nav-item a:hover {
      background: black! important;
    color: white !important;
   padding-right: 13px !important;
  padding-left: 13px !important;
     
}

Let me know how it goes!