Background For Navigation Element Not Filling Entire Space - css

Question

StackOverflow Community!
I have a problem with my Website where I am hovering over an item on my navigation bar, and it doesn't cover the full spot I intend for it to cover. For those moderators who keenly notice that this question is answered Here and Here as well, it isn't applicable in my situation since one is a span tag, and the other is a vertical dropdown, not a horizontal navigation bar. Attached below is a screenshot of the problem.
The effect I intend is to get the background right to the edge of the top and bottom, and pushing the background to the edge of the right and left
I've tried playing around and looking online, but the answer that is most consistent is:
Use display: block
Which would mess up the flow of the navigation bar if I were to implement it. Can someone point me in the right direction?
CSS used to style the nav bar and it's elements:
nav {
text-align: center;
background-color: black;
}
nav ul {
list-style-type: none;
padding: 10px;
}
nav li {
display: inline-block;
transition: background-color 0.3s ease-in-out 0s;
}
nav li:hover {
background-color: lightgrey;
}
nav a {
text-decoration: none;
color: white;
}
NOTE:The issue is with me adding some padding to the ul element, I understand that. I am just not sure how to circumvent it without screwing the navigation bar

Answer 1

Just put the padding on the li instead.
nav {
text-align: center;
background-color: black;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
transition: background-color 0.3s ease-in-out 0s;
padding: 10px;
}
nav li:hover {
background-color: lightgrey;
}
nav a {
text-decoration: none;
color: white;
}
<nav>
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
</ul>
</nav>