Phantom space between 2 <li> s

Question

built a simple horizontal navigation without a drop-down menu for the new site design and everything works fine, as usual, except that there is a phantom space between the two buttons, which does not appear in dragonfly labels or in the code, but appears on the screen when the hover rule is applied . and he does not appear between each, only between 2 specific lis. I have added the images below, showing what I mean:

no problem, everything looks as it should:

on the right side of the li hover there are px spaces that shouldn't 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><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Lawn Care</a></li>
  <li><a href="">Tree &amp; Shrub Removal</a></li>
  <li><a href="">Contact</a></li>
</ul>

Run code

any idea where this might come from? This is not a huge deal, if not Solvable, but it is an annoyance.

Thank you in advance

Answer 1

, . , webkit CSS, display:block .navi li a padding: 16px padding: 0 16px . , , , , .

Answer 2

Chrome, 110%. , zoom: 1.0;.

Answer 3

, .

<ul class="navi"
  ><li><a href="">Home</a></li
  ><li><a href="">About</a></li
  ...
></ul>

Answer 4

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 item is the size of the root element (you can use any other device - except em- if you want).