Extra White Space Above the Footer Div - html

Question

When I started Googling this question I saw the plethora of SO questions that are similar. But I tried them all and no luck.
I am getting a white margin from somewhere. Not sure where.
Here is a fiddle
https://jsfiddle.net/ayezee33/smxdewam/
Here is what I have tried.
Adding margin:0; and padding:0; to the html and body.
Linked up normalize.css
Added 0 margin on the block level element and child element
Found a user agent stylesheet inserting 8px margin (Chrome)
Used the !important call to override that
Noticed user agent stylesheet was applying block to my and
tried to override that but I am sure I actually want that.
Any help would be great. I am going crazy trying to figure this out.
Apparently I need to add code to post this question?
<header>
<h1>Building blocks are important!</h1>
<p>This website serves as my test to showcase my coding abilities</p>
<div id="cta">
<input id="cta" name="email" placeholder="Email">
<button type="submit">Learn More</button>
</div>
</header>
<div class="callout">
<p>Testing this call out section</p>
</div>
.callout {
display:block;
max-width:100%;
height:5em;
background:#000;
text-transform:uppercase;
}
.callout p {
line-height:5em;
margin:0;
}

Answer 1

The space is coming from the margin on your #cta:
margin: 1em auto;
Simplify your css too, I feel like you don't need most of your rules.

Answer 2

The margin on the #cta DIV is the one thats causing the white-space. You can add overflow:hidden to the header, that would fix the issue.
<nav>
<div id="main-nav">
<img src="img/logo.jpg" />
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
</ul>
</div>
</nav>
<header>
<h1>Building blocks are important!</h1>
<div id="cta">
<input id="cta" name="email" placeholder="Email" />
<button type="submit">Learn More</button>
</div>
</header>
<div class="callout">
<p>Testing this call out section</p>
</div>
header {
overflow: hidden;
}