Adding button to menu via CSS

Hi there,

Based on this thread:

https://generatepress.com/forums/topic/custom-css-in-menu-item-not-working/

I modified my original CSS:

.main-navigation .gg-login a {
background-color: #006bae;
color: #FFFFFF !important;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
}

.main-navigation .gg-login a:hover {
background-color: #c0a43e !important;
color: #FFFFFF;
}

To:

.main-navigation .main-nav ul li.gg-login a {
background-color: #006bae;
color: #FFFFFF !important;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
}

.main-navigation .main-nav ul li.gg-login a:hover {
background-color: #c0a43e !important;
color: #FFFFFF;
}

But now there's additional padding being applied; you can see the issue here:

https://pixelhappy.co/blueprint17/login/

Here's a screenshot of how I want it to display and how it did display (on all pages except current) with my initial CSS:

https://gyazo.com/7cce615fceda9a9056ecbd40f8cc02dc