Fixing Menu Rollover

So I’ve been on a bit of a crusade to fit the web logo into the menu and make it looks nice. I managed to make it so the text was relatively centered within the menu by adding padding, but now the rollover boxes are no longer in line with the text and the click links are weird. I’d like to be able to have the rollover boxes fit the size of the menu (so same width, but longer length) as well has have the link click areas fill the rollover box space. (I’m going to assume filling the rollover boxes will solve that second part).

This is the custom css I have currently for reference. I also totally recognize the fact that I could’ve only found a partial fix to get where I need to go. Any help much appreciated!

* Vantage Remove Logo in Menu img constraint */

header#masthead.masthead-logo-in-menu .logo > img {
max-height: 100px !important;
}


/* Menu Padding Horizontal */

.main-navigation ul li a {
padding-top: 50px !important;
padding-bottom: 0px !important;
}

/* Vantage Center the main menu */
 
.main-navigation ul {
text-align: center !important;
}
 
.main-navigation ul li {
display: inline-block !important;
float: none !important;
}

URL: http://greyseasonmusic.com