How to fix margin in nav - html

Question

I have this code:
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
}
nav li:first-child, nav li:last-child {
border-radius: 5px;
}
<nav>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</nav>
I would like to remove this right margin.
How can I do it? I tried:
margin:0
padding:0
It doesn't work.

Answer 1

It's a common problem of inline-blocks, you should remove white space between elements.
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
}
nav li:first-child, nav li:last-child {
border-radius: 5px 0 0 5px;
}
nav li:last-child {
border-radius: 0 5px 5px 0;
}
<nav>
<li>Home</li><!--
--><li>Work</li><!--
--><li>Contact</li>
</nav>
Reference: Fighting the Space Between Inline Block Elements

Answer 2

Please reset of parent element font-size: 0 and line-height: 0
then set required font-size and line-height on child element
Like this way
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
font-size: 14px;
line-height: 20px;
color: #fff;
text-align: center;
}
nav li:first-child {
border-radius: 5px 0 0 5px;
}
nav li:last-child{border-radius: 0 5px 5px 0;}
nav ul{
font-size: 0;
line-height: 0;
}
nav li:hover{
background: #333;
}
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>