Får inte a:hover med padding att funka

Tja har ett litet problem då jag försöker skapa en menubar, allt funkar förutom att när jag för musen över objektet så blir det inte på paddingen utan bara på objektet och skapar då stora mellanrum mellan objekten. har bara med borden för att visa hur långt ifrån de är varandra.

okej vet inte vilka jag ska ha med så jag postar typ alla

ul {
padding-left: 0;
list-style-type: none;
overflow: auto;
display: inline;
}

ul li {
float: left;
border: 1px solid #333;
border-bottom: none;
margin: 0 5px;
}
ul li {
margin: 0;
padding: 0;
padding: 10px 15px;
display: inline-block;
}

ul li a {
display: block;
padding: 15px 30px;
text-decoration: none;
}

och hover:

a:hover {
text-decoration: none;
color:#F00;
background-color: rgba(0,0,0,0.3);

}

Edit: tog bort onödiga koder.

oj såg nu hur jag skulle fixa det. om jag tar bort paddingen på
ul li {
margin: 0;
padding: 0;
padding: 10px 15px;
display: inline-block;
}
och ändrar den till 0 så blir det ju ingen padding på sidorna då försvinner ju mellanrummet går det lika bra att göra så eller funkar det bättre med hover på li?

Förlåt om jag tagit upp onödig tid då jag hitta problemet själv. :S

okej tack nu när jag löst det har jag ett litet annat problem som jag skulle vilja ha hjälp med då jag inte kan lösa det själv. hur får jag min background-color att "alligna" så den rör slutet av både toppen och botten? Om jag ändrar padding far den bara längre ner.

jo jag märkte det när jag ändrade lite hur får jag till det? (se senaste post.)

Edit: tog bort paddingen och ändrade lite och så blev det perfekt! Tack för all hjälp dock!