Gap Between Two Div's in One page web site - html

Question

I am Trying to create this One page containing different divs with 100% width.
But, when I insert a 'h2' at top of div, itcreates gap between two div's.
assigning top margin removes this gap, but I want the 'h2' at top only.
here's JSFiddle
HTML:
html,
body {
height: 100% !important;
width: 100% !important;
margin: 0px;
padding: 0px;
}
.mainDiv {
height: 500% !important;
width: 100% !important;
}
.page {
height: 20% !important;
width: 100% !important;
text-align: center;
}
#headerDiv {
height: 15%;
position: fixed;
background-color: #7f4c76;
width: 100%;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
}
#div1 {
padding-top: 5%;
background-color: #334960;
}
#div2 {
background-color: #f17c72;
}
#div3 {
background-color: #32ac97;
}
#div4 {
background-color: black;
}
#div5 {
background-color: yellow;
}
h1 {
color: #E6E6E6;
margin-left: 50px;
font-family: "MS Sans Serif", Geneva, sans-serif;
font-size: 300%;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
}
h2 {
color: #E6E6E6;
font-weight: normal;
font-family: 'Signika', sans-serif;
font-size: 300%;
}
<div class="mainDiv">
<div id="headerDiv">
<h1>CSS3 Demo </h1>
</div>
<div id="div1" class="page">
<h2>Text Effects Demo</h2>
</div>
<div id="div2" class="page">
<h2>Transition Demo</h2>
</div>
<div id="div3" class="page">
<h2>Animation Demo</h2>
</div>
<div id="div4" class="page">
<h2>Multiple Columns</h2>
</div>
<div id="div5" class="page">
<h2>Multiple Columns</h2>
</div>
</div>
Please Help.
Edit screenshot added:

Answer 1

Add this to your h2
h2 {
margin:0;
}
You issue is that your div has a default margin, of which can be overwritten using this styling

Answer 2

If I understood you correctly, you want the <h1>from the headerDivto have margin-top:0px; if this is what you want then the fix is quite simple:
#headerDiv h1 {
margin-top:0px;
}
Or if you want it to be only the direct descendants from the headerDiv you could do the following:
#headerDiv > h1 {
margin-top:0px;
}
Here you can find the fiddle updated: http://jsfiddle.net/s0p8ogdb/3/
After seeing the screenshot recently added you can fix this simply by making the page class display:inline-block, here's an updated fiddle: http://jsfiddle.net/s0p8ogdb/4/

Answer 3

Try this :
h2 {
color: #E6E6E6;
font-weight: normal;
font-family: 'Signika', sans-serif;
font-size: 300%;
margin-top:0;
}
#div1 h2 {
padding-top: 1em
}