Navbar padding issue - css

Question

So I have this issue where my Navbar splits itself based on the specified padding. Easier to see what I mean below.
As you can see I have an extra blank menu item which after some time I was able to narrow down to it being caused by the padding.
Above is with 0 padding. How can I keep the Navbar height along with fixing the menu?
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 0;
}
Specifically:
padding: 20px; (image1) padding: 0px; (image 2)
Snippet
#menu {
display: flex;
margin: 0;
width: 1080px;
margin-top: 5%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
overflow: hidden;
}
li {
flex: 1;
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
<nav>
<ul id="menu">
<li class="active">HOME</li>
<li>GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>

Answer 1

Want was your problem? (My assumption)
First check this CODEPEN
You were assigning padding property to li a:hover, instead of li a.
As it's possible to achieve the desired result by adding padding to li a and other way is by assigning line-height to either li/#menu.
#menu {
display: flex;
margin: 0;
width: 1080px;
margin-top: 5%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
overflow: hidden;
}
li {
flex: 1;
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
<nav>
<ul id="menu">
<li class="active">HOME</li>
<li>GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>