Background hover on navigation "bumping" items

Hey SS Forum friends,

I'm still pretty new to CSS, and am trying to add a hover effect to the navigation on this site, but what I've done adds a "bump" effect due to the padding I guess?

Any ideas on how to eliminate this? I tried adding the border and padding stuff, but to no avail... :S

/* Nav item color */
.header-nav-item a {
    border-radius: 10px 10px 0px 0px;
    padding: 2px 10px;
    transition-duration: 0.4s;
 
}
/* Nav item hover color */
.header-nav-item a:hover {
    background-color: #D5B56E !important;
  border-radius: 10px 10px 0px 0px;
  padding: 2px 10px;
    transition-duration: 0.4s;
}

Btw, in your :hover class, you just need to define the properties which you want to change, You can remove the border and padding from :hover class. 

However, the bump effect you mentioned might be caused by something else.

can you show it? a locked draft website should do.

Thanks @Vicks

Here's the live site: https://www.catherinebfogarty.com/

@Vicks Thank you so much! This worked perfectly.