Unidentified edge where two borders meet? - html

Question

I have noticed when testing my page on my phone that the point where the two borders meet, an unidentified edge appears
I have also tried having a larger border bottom on my h1 element and a 0 border top for my nav ul element
And look what happens if the background color of the body is the same color as the border
This issue also appears while testing on Google Chromes responsive developer tool.
This is my code for this question
body {
width: 100%;
background-color: blue;
}
h1 {
font-size: 35px;
text-align: center;
color: yellow;
background-color: blue;
border:20px solid yellow;
border-bottom: 10px solid yellow;
margin: 2%;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
nav ul {
background-color: blue;
display: flex;
justify-content: space-between;
list-style-position: inside;
padding: 0;
margin: 0;
border:20px solid yellow;
border-top: 10px solid yellow;
margin-left: 2%;
margin-right: 2%;
}
nav li {
font-size: 15px;
display: inline-block;
list-style-type: none;
background-color: blue;
color: yellow;
padding: 10px;
}
nav ul li a {
width: 67px;
display: inline-block;
text-align: center;
color: yellow;
text-decoration: none;
}
<header>
<h1>
SPACING
</h1>
</header>
<nav>
<ul>
<li>MARGIN</li>
<li>BORDER</li>
<li>PADDING</li>
</ul>
</nav>
I have disabled zoom by using <meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scable=no"> in the head of my html.
I have also tried increasing the border-bottom of my h1 element by 1px and giving the nav ul element a margin-top of -1px which partially works, however this issue will still appear at differnt resolutions or orientation.
I am wondering if anybody knows why this happens and hopefully a solution.

Answer 1

Try using this, see if that's what you need :
https://jsfiddle.net/1r7hp15c/3/
CSS:
body {
width: 100%;
background-color: blue;
}
h1 {
font-size: 35px;
text-align: center;
color: yellow;
background-color: blue;
margin: 2%;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
nav ul {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
margin-left: 2%;
margin-right: 2%;
background:blue;
}
nav li {
font-size: 15px;
display: inline-block;
list-style-type: none;
background-color: blue;
color: yellow;
padding: 10px;
}
nav ul li a {
width: 67px;
display: inline-block;
text-align: center;
color: yellow;
text-decoration: none;
}
div{
padding: 20px;
background: yellow;
}
nav{
padding: 20px;
background: yellow;
margin-top: -1px;
}
HTML :
<header>
<div>
<h1>
SPACING
</h1>
</div>
</header>
<nav>
<ul>
<li>MARGIN</li>
<li>BORDER</li>
<li>PADDING</li>
</ul>
</nav>