Currently, I am delving into the realm of CSS and web design in an effort to grasp the fundamentals of organizing a basic website.
Ideally, my goal is to eliminate any space between the main navigation and the main content. However, despite setting both div's margins to 0, there persists a visible gap between them that seems unaffected (I initially assumed it was merely a collapsed margin issue).
body {
background-color: black;
margin: 0 0 0 0;
}
#main-nav {
height: 37px;
width: 100%;
overflow: hidden;
background-color: blue;
margin: 0 0 0 0;
}
#main-content {
height: 100px;
width: 100%;
background-color: red;
margin: 0 0 0 0;
}
p {
color: lime;
}<div id="main-nav">
<p>This is just a demonstration of my problem.</p>
</div>
<div id="main-content">
<p>This is just a demonstration of my problem.</p>
</div>