Fixing the space between two li elements which are displayed inline-block

While doing some navigation designs, I came across a problem that if I wrap 4 lis in a ul and wrap it in nav and gives the width of each li to 25% and style it with some basic css properties. A problem occurs.
The problem is that, The space between two li elements.

Click to zoom

You can see in the image that, There is a little space between Home, Products, About us and Contact us link.
I've made a pen in CodePen of this demo if you would like to see it live.
There are probably 5 ways to get rid of it and another one is to use flexbox.
The markup of the menu:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  width: 25%;
  text-align: center;
  padding: 1em;
  font-size: 1.6em;
  background: hotpink;
  color: #fff;
  margin: 0;
  -webkit-transition: 0.2s all ease-in-out;
  -o-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

nav ul li:hover {
  background: #fff;
  color: hotpink;
}

nav ul li a {
  color: inherit;
  text-decoration: none;
}

To fix it you have to add comment between two li.
So now there should be no space between two elements.
After applying this technique I can get rid of the spaces between two li elements, Here is a preview of it.
I've also made a pen of it on CodePen, If you would like to see it live.
The other ways to do it, is on Chris Coyier's post on CSS-Tricks.


Thanks for reading the Post, Any queries/issues can be submitted via comments, Have a Nice Day!