Phantom white space between 2 <li>s - html

Question

built a simple no-dropdown horizontal nav for a new site design and its all working fine like normal except that between 2 buttons is a phantom white space that doesn't appear in dragonfly's metrics, or in the code, but is visible on the screen when the li's hover rule applies. and it does not appear between each li, just between 2 specific lis. i have attached images below showing what i mean:
no problem, everything looks as it should:
on the right side of the hovered li is a px of whitespace that shouldnt be there:
.navi {
display: inline-block;
height: 50px;
max-height: 50px;
overflow: hidden;
list-style: none;
float: right;
}
.navi li {
float: left;
}
.navi li a {
padding: 16px;
border-left: 1px solid #8bd854;
font-size: 16px;
text-decoration: none;
line-height: 50px;
color: #8c8c8c;
transition: all 0.5s ease;
}
.navi li a:hover {
background-color: rgba(13, 137, 0, 0.61);
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
color: #fff;
}
<ul class="navi">
<li>Home</li>
<li>About</li>
<li>Lawn Care</li>
<li>Tree & Shrub Removal</li>
<li>Contact</li>
</ul>
any idea where this may be coming from? It's not a huge deal if not Solvable but it is an annoyance.
Thanks in advance

Answer 1

An easy way to fix this is by using the font-size:
.navi {
font-size: 0;
}
.navi li {
font-size: 1rem;
}
This sets the font size of the list to zero and the font size of the list element to the size of the root element (you may use any other unit – except em – if you want to).

Answer 2

I'm not entirely sure what is causing this. Maybe it's webkit or some nuance of CSS, but at least in this one particular case, you can add display:block to .navi li a and change padding: 16px to padding: 0 16px on that same rule. Unfortunately I can't figure out why this works but my best guess is that whitespace is causing the issue.

Answer 3

I was able to reproduce the issue in Chrome by setting the zoom to 110%. Perhaps, you could set the zoom of all the navigation elements and their children to be zoom: 1.0;.

Answer 4

It is probably just whitespace. try
<ul class="navi"
><li>Home</li
><li>About</li
...
></ul>