Button in Menu - Hover color issue

I am trying to add a ghost-button inside the header navigation for a single navigation item.
Almost everything works fine except the fill of the Hover color.

This Hover color expands beyond the border of the button towards the top and bottom of the navigation header itself.
I probably do something wrong in the additional CSS that is as follows:

(p.s. the site URL is in the private info)

=======================================================
/* login/logout button in menu */

#menu-item-21522 {
border: 2px solid #d3ae48;
border-radius: 5px;
}

#menu-item-21522 a {
padding-left: 50px;
padding-right: 50px;
margin-top: -15px;
margin-bottom: -15px;
}

#menu-item-21522:hover a {
background-color: #d3ae48;
color: #ffffff;
}
=========================================================

Maybe you can help me, it has probably nothing to do with GeneratePress though ?

regards, Walter