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:

About Kaushalya Mandaliya

Kaushalya has a wide vision to let people learn tricky things with smart techniques. He loves to tinker with Web Technologies and even in the Android Studio. He is on Twitter: @kmandalwala or Get in touch via kaushalya[@]seebeetee.com