problem with image hover on menu

i’ve got a hover image on my menu but it is not centering. on the longer words it appears more centered than on shorter words. also, the underline is underlining some of the spaces between the words, when it should be just the letters getting underlined on hover.

a friend of mine who is a webdesigner thought something is getting overridden from the theme.

my website is: https://www.lizartlizard.com/

the code i am using is below. i’ve also tried setting a defined width like 180px instead of auto, but nothing seems to correct the problem.

#maind-nav li {

list-style: outside none none;
text-align: center;
padding: 55px 10px 0px 10px;
  border-bottom: 12px solid #fff;
  width: 100%;
 }

#main-nav a:hover {
  background-image: url(https://lizartlizard.com/spaceship1.png);
padding: 55px 10px 0px 10px;
border-bottom: 12px solid #cdf268;
text-align: center;
  width: 100%;
}

#main-nav a {
padding: 55px 10px 0px 10px;
border-bottom: 12px solid #fff;
text-align: center;
  width: 100%;
}