CSS unwanted white space [duplicate] - css

Question

This question already has answers here:
Margin-Top push outer div down
(8 answers)
Closed 4 years ago.
So I was creating a page and put an 'h1' tag inside of a full height 'div' tag. Now when I went to add a bit of 'margin-top' to the h1 for some reason it created a white space where the background color should be.
Please help. What could be causing this?
Here is my code:
body {
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}
#first-div{
height:100vh;
width:100%;
background-color:#E0EBE8;
}
#nav-bar {
background-color:#E0EBE8;
height:58px;
position:fixed;
top:0;
left:0;
width:100%;
}
.menu-link {
float:right;
text-decoration:none;
color:#008080;
font-size:115%;
margin-top:20px;
margin-right:107px;
}
.menu-link2 {
float:right;
text-decoration:none;
color:#008080;
font-size:115%;
margin-top:20px;
margin-right:52px;
}
#second-div {
height:100vh;
}
h1 {
margin-top:100px;
}
<div id="first-div">
<div id="nav-bar">
Contact
Work
About
</div>
<h1>This is my heading</h1>
</div>
<div id="second-div">
</div>

Answer 1

You have the h1's margin-top at 100px, which pushes it down 100 px from the top of the screen. The nav-bar's height is only 58 px, which leaves 42 px of room in between, which is the white space you don't want. Either change the nav-bar's height to 100px, or change the h1's margin-top to 58px.
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#first-div {
height: 100vh;
width: 100%;
background-color: #E0EBE8;
}
#nav-bar {
background-color: #E0EBE8;
height: 58px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.menu-link {
float: right;
text-decoration: none;
color: #008080;
font-size: 115%;
margin-top: 20px;
margin-right: 107px;
}
.menu-link2 {
float: right;
text-decoration: none;
color: #008080;
font-size: 115%;
margin-top: 20px;
margin-right: 52px;
}
#second-div {
height: 100vh;
}
h1 {
padding-top: 100px;
}
<div id="first-div">
<div id="nav-bar"> Contact Work About </div>
<h1>This is my heading</h1>
</div>
<div id="second-div"> </div>