Separation of head and body
<p>I'm having some trouble with an area of space between the top of the browser window and my 'head' element, and the 'head' element and my 'body'.</p>

<p><a href="https://i.stack.imgur.com/JS4nG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JS4nG.png" alt="enter image description here"></a></p>

<p>Thus far, adding the following class has not resulted in any improvement: </p>

<pre><code>.header{   &lt;=== I have also attempted .head with no effect
    position: absolute;
    top: o;
}
</code></pre>

<p>I have also experimented with padding and margins, but simply cannot get the head content to "kiss" both the top of the screen and body content.</p>

<p>You can see a rundown of my HTML and CSS here: <a href="https://jsfiddle.net/2w3vzstf/" rel="nofollow noreferrer">https://jsfiddle.net/2w3vzstf/</a></p>

<p>How do I overcome this?</p>