White space around bordered elements in navigation? - html

Question

I'm asking on here because I'm thoroughly fed up of trying to resolve this myself and getting absolutely nowhere. The only solution I've found so far is to remove the border itself but it's probably best to explain the problem first...
So I'm building a navigation bar for a website and I've done absolutely dozens of these, re-used the same code across multiple projects because... it's a navigation bar! It's incredibly simple, the only difference is that I have an extra nested navigation sub-category. However this occurs regardless whether or not that sub-category exists. When I've built it, it looked absolutely fine but I noticed that there was a small white gap between the elements inside the menu element between them and the border. This gap is incredibly inconsistent however - in the small JS fiddle screen on my old monitor it doesn't appear at all but move it onto my laptop widescreen display and the gaps appear.
I've checked all of my CSS and code, nothing is amiss compared to my other websites and according to Chrome's Computed tab, there isn't actually a gap there at all. There's nothing but the border?! How does it appear then when the Computed tab tells me it's not there? Am I losing my mind?
Regardless, I've posted a JSFiddle to try and get some input on this. I'm using SCSS compiled by Scout App and it appears to only happen on Chrome as far as I can see. Anybody got any ideas?
*,
body {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: auto;
background-color: #D0E9FD;
}
body {
color: #1D1E2C;
font-size: 18px;
font-family: "Kodchasan", sans-serif;
}
a {
text-decoration: underline;
color: #713031;
}
img {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5 {
color: #2AA6A6;
}
h1 {
font-size: 32px;
margin-top: 10px;
}
h2 {
font-size: 28px;
}
hr {
border: 4px solid #2AA6A6;
}
input,
textarea,
select {
border: 2px solid #2AA6A6;
padding: 10px;
color: #991B1D;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border: 2px solid #991B1D;
}
input:disabled,
textarea:disabled,
select:disabled {
background-color: #d9f6f6;
border-color: #d9f6f6;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
font-family: "Kodchasan", sans-serif;
font-size: 18px;
opacity: 1;
}
input:disabled:-ms-expand,
textarea:disabled:-ms-expand,
select:disabled:-ms-expand {
display: none;
}
form {
border: 2px solid #2AA6A6;
padding: 10px;
}
form input,
form textarea,
form label {
margin-bottom: 10px;
width: 49%;
display: inline-block;
}
form input,
form textarea {
border: 2px solid #2AA6A6;
padding: 10px;
color: #991B1D;
}
form input:focus,
form textarea:focus {
outline: none;
border: 2px solid #991B1D;
}
form input[type="submit"] {
width: 100%;
margin: 0;
}
form button {
background-color: #2AA6A6;
color: #FFFFFF;
border: 2px solid #2AA6A6;
}
form a {
width: 90%;
display: block;
text-align: center;
}
form>p {
width: 50%;
display: block;
margin: 0 auto;
text-align: center;
}
#navigation {
padding: 2px 0;
background-color: #2AA6A6;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation li a {
display: block;
color: #FFFFFF;
font-weight: 700;
font-size: 24px;
text-decoration: none;
width: 100%;
padding: 15px;
}
#navigation li.parent-cat ul {
background-color: #FFFFFF;
margin: 10px 0;
margin-left: 20px;
}
#navigation li.parent-cat ul a {
color: #713031;
}
#navigation li ul {
background-color: #FFFFFF;
margin: 10px 0;
margin-left: 20px;
}
#navigation li ul a {
color: #713031;
}
#navigation #nav {
display: none;
border-top: 5px solid #FFFFFF;
}
#navigation #menu {
display: block;
text-align: center;
background-color: #2AA6A6;
cursor: pointer;
padding: 10px 0;
font-size: 24px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color: #FFFFFF;
}
#navigation #menu.open {
background-color: #713031;
color: #FFFFFF;
}
#navigation li {
display: inline-block;
}
#navigation li a {
font-size: 18px;
padding: 20px 30px;
}
#navigation li a:hover {
background-color: #FFFFFF;
color: #2AA6A6;
}
#navigation li.parent-cat {
position: relative;
}
#navigation li.parent-cat:hover a {
background-color: #FFFFFF;
color: #2AA6A6;
}
#navigation li.parent-cat:hover ul {
display: block;
position: absolute;
width: 100%;
margin-top: 0;
z-index: 99;
margin-left: 0;
border: 2px solid #713031;
margin-bottom: 0;
}
#navigation li.parent-cat:hover ul li {
width: 100%;
}
#navigation li.parent-cat:hover ul a:hover {
background-color: #713031;
color: #FFFFFF;
}
#navigation li.parent-cat:hover .parent-cat:hover ul {
display: block;
margin-left: 100%;
margin-top: -32%;
}
#navigation li.parent-cat:hover .parent-cat ul {
display: none;
}
#navigation li.parent-cat ul {
display: none;
}
#navigation #menu {
display: none;
}
#navigation #nav {
display: block;
border: none;
}
/* EOS */
<div id="navigation">
<ul id="nav">
<li id="one"><span>Home</span></li>
<li id="two" class="parent-cat"><span>Our Workshop</span> <i class="fas fa-level-down-alt"></i>
<ul>
<li id="three"><span>Our Solutions</span></li>
<li id="four" class="parent-cat">
<span>Our Products</span> <i class="fas fa-level-down-alt"></i>
<ul>
<li id="five"><span>Lighting Components</span></li>
<li id="six"><span>Motorcycle Parts</span></li>
<li id="seven"><span>RC Buggy Parts</span></li>
</ul>
</li>
</ul>
</li>
<li id="five"><span>Careers</span></li>
<li id="six"><span>Latest News</span></li>
<li id="seven"><span>Contact Us</span></li>
</ul>
<a id="menu"><i class="fas fa-bars"></i></a>
</div>