Removing space between nav border and element inside nav - html

Question

It is not too much of an issue but I wanted to know why there is still a space between the navbar's border and an element that is at the corner. This is my HTML and CSS code along with an image of the problem I am referring to. I have changed the margins but there is still space, I also tried putting the elements on the same line as the element but the space still exists.
IMPORTANT: THE MARGIN DISAPPEARS WHEN THE PAGE IS ZOOMED INTO
a {
display: block;
text-decoration: none;
text-align: center;
padding: 1em;
margin: 0;
}
a:hover {
background-color: green;
}
ul,
li {
display: inline-block;
padding: 0;
margin: 0;
}
ul {
display: flex;
max-width: 50%;
justify-content: space-around;
flex-grow: 1;
}
nav {
position: sticky;
top: 0;
width: 90%;
margin: 0;
padding: 0;
border-left: 5px solid black;
border-right: 5px solid black;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: greenyellow;
}
<nav>
Home
<ul>
<li>
Products
</li>
<li>
Contact
</li>
<li>
About
</li>
</ul>
Sign Up
</nav>

Answer 1

It should not happen now, I have gave margin: 8px 0 which was just margin: 8px
body {
margin: 8px 0;
}
a {
display: block;
text-decoration: none;
text-align: center;
padding: 1em;
margin: 0;
}
a:hover {
background-color: green;
}
ul,
li {
display: inline-block;
padding: 0;
margin: 0;
}
ul {
display: flex;
max-width: 50%;
justify-content: space-around;
flex-grow: 1;
}
nav {
position: sticky;
top: 0;
width: 90%;
margin: 0;
padding: 0;
border-left: 5px solid black;
border-right: 5px solid black;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: greenyellow;
}
<nav>
Home
<ul>
<li>
Products
</li>
<li>
Contact
</li>
<li>
About
</li>
</ul>
Sign Up
</nav>