How do I remove the gap inbetween my navbar buttons [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
I would like to know how to fix this issue I have tried everything that I can think of. Any help would be great. all my paddings and margins are set to zero or auto.
nothing that is obvious to me is causing the issue, I have tried first and last child float left and right but this did not work.
#nav {
text-align: center;
margin: 0;
overflow: hidden;
display: block;
}
#nav ul {
margin: auto;
padding: 0;
font-size: 100%;
list-style: none;
list-style-type: none;
}
#nav ul li {
display: inline-block;
}
#nav a {
transition: 0.3s;
background-color: #fff;
}
#nav ul li a {
text-decoration: none;
padding: 10px 30px;
display: block;
color: #000000;
background-color: red;
}
#nav a:hover {
color: #fff;
background-color: red;
}
#nav .active {
background-color: red;
color: #000000;
}
<div id="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>

Answer 1

I just added 'display: flex' to #nav ul.
Please check this fiddle https://jsfiddle.net/smilingpigs/ar1h8ynq/5/
nav {
text-align: center;
margin: 0;
overflow: hidden;
display: block;
}
nav ul {
margin: auto;
padding: 0;
display: flex;
font-size: 100%;
list-style: none;
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav a {
transition: 0.3s;
background-color: #fff;
}
nav ul li a {
text-decoration: none;
padding: 10px 30px;
display: flex;
color: #000000;
background-color: red;
}
nav a:hover {
color: #fff;
background-color: red;
}
nav .active {
background-color: red;
color: #000000;
}
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</nav>