Heading 1 causing DIVs to part [duplicate] - html

Question

This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
I have an issue with my page its making a gap appear between the H1 and main page DIV section. After 2 hours I cant seem to fix it. Can anyone advise where its going wrong. I want the top banner and the #mainarea to be on top of each other. There is a small gap between the 2 at the moment.
body {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: #f6f6f6;
padding: 0;
margin: 0;
border: 0;
}
#logo {
width: 100%;
height: 50px;
background-color: #000;
}
#mainarea {
width: 60%;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #E70A0E;
height: 250px;
}
h1 {
font-size: 1.5em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bolder;
font-style: normal;
padding-left: 15px;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
<h1>This is a test </h1>
</div>

Answer 1

Set overflow:auto; in #mainarea and add margin:auto toh1 Tag.
See, what happens when you put div inside div: https://stackoverflow.com/a/8529773/9947640
body {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: #f6f6f6;
padding: 0;
margin: 0;
border: 0;
}
#logo {
width: 100%;
height: 50px;
background-color: #000;
}
#mainarea {
width: 60%;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #E70A0E;
height: 250px;
overflow:auto;
}
h1 {
font-size: 1.5em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bolder;
font-style: normal;
padding-left: 15px;
margin:auto;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
<h1>This is a test </h1>
</div>