How do I make a text hover background take up the full space and ignore the padding?

Site URL: https://bassoon-oleander-texb.squarespace.com/

Password: 12345

Very new to this! I'm trying to make the green hover background for the text take up the full space in the folder nest (between each line) without affecting the padding of the text itself.  Right now there's a white margin around the hover background due to the padding. 

Here's the code I'm using: 

.header-nav .header-nav-item--folder .header-nav-folder-content {
    top: auto;
    left: 0em;
    text-align: left;
    width: 175px;
   font-size: 14px;
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 3px;
   padding-right: 3px;
}
.header-nav-folder-item {
 color: #fff ;
 border-top: 1px solid #b8b8b8;
 padding: 7px 0 !important;
}

.header-nav-folder-item a:hover {  

background: #77AF87;
 color: #fff !important;
}
 

Any help would be greatly appreciated!

Add to Home > Design > Custom CSS

.header-nav-folder-item a {
    padding: 7px !important;
}
.header-nav-folder-item {
    padding: 0 !important;
}
.header-nav-folder-content {
    padding: 0 !important;
}

Thank you @tuanphan!