Navigation Folder customization - padding issue

Site URL: https://taverna-rossa-21.squarespace.com/

Been working on a design for a folder to look more like a button and have the content styled in contrast to the rest of the navigation. Here is the CSS that I've added so far (be kind, super new to this):

// Navigation Button //

.header-nav .header-nav-item--folder {
  background: #f7f1e9 !important;
  color: #c14729 !important;
  width: 110px;
    border: 2px #c14729 solid;
  border-radius: 0px;
  text-align: center !important;
}

// Navigation Folder Style //

.header-nav .header-nav-item--folder .header-nav-folder-content a {
  max-width: 100px !important;
  text-align: center;
  color: #f7f1e9 !important;
  background: #c14729 !important;
}

The problem is that there is a padding that I can't figure out how to get rid of. I've attached a screenshot for reference. Site password is: pizza

8 hours ago, SquareRefresh said:

Hey @Penn try this:

body:not(.header--menu-open) .header-nav-folder-content {
  background-color: transparent !important;
}

My result:

That worked great! Thank you.