There was a mysterious yellow line that appeared between the #mainContainer and the HTML-body, specifically on the right side and only below the header/nav-section.
This peculiar issue occurred in both Chrome and Firefox browsers.
UPDATE: After numerous attempts, I finally managed to eliminate the enigmatic yellow line. Although the reason behind its appearance remains unknown, it has vanished now. For reference, here is the code snippet:
<!DOCTYPE html>
<html>
<head>
<title>navbar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainContainer">
<header>
<h1>Test Webseite</h1>
</header>
<nav>
<ul id="menu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
</ul>
</nav>
<section>
Lorem ipsum
</section>
</div>
</body>
</html>
CSS:
html {
height:100%;
}
body {
margin: 0 auto;
padding: 0;
font-family: sans-serif;
background-color: #dedede;
width:700px;
height: 100%;
}
#mainContainer {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
}
header {
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
nav ul {
background: #424242;
overflow: hidden;
color: white;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
}
nav ul li {
display: inline-block;
font-size: 16px;
}
nav ul li:hover {
background-color: #399077;
}
ul li a {
text-decoration: none;
color: white;
display: inline-block;
padding: 12px 35px;
}
section {
box-sizing: border-box;
line-height: 1.7em;
font-size: 0.9em;
padding: 40px;
width: 100%;
min-height: 100%;
margin: 0 auto;
text-align: justify;
text-justify: inter-word;
}