Child elements outside parent div
<p>It appears that <strong>all the elements nested inside my parent divs are overflowing</strong> from the bottom border of my parental divs.</p>
<p>As you can see the image divs overlay the parent and the paragraph on the header</p>
<p>Similar questions have to deal with floating elements, but this is not the applicable here since I don't use those</p>
<p>Why is &quot;position:relative&quot; ?</p>
<p>Here is the code,
and a ready fiddle for your, very much appreciated ,tweaks.</p>
<p><a href="https://jsfiddle.net/r96fxfgj/" rel="nofollow noreferrer">https://jsfiddle.net/r96fxfgj/</a></p>
<pre><code>        &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;title&gt;DISSECTIONS&lt;/title&gt;
    &lt;head&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;dissections.css&quot;&gt;
    &lt;/head&gt;
        &lt;body&gt;
            &lt;div id=&quot;header&quot;&gt;
                &lt;p&gt;&lt;span&gt;/&lt;sup&gt;*&lt;/sup&gt;&lt;/span&gt;DISSECTIONS&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id=&quot;main&quot;&gt;
                &lt;div class=&quot;photo&quot; id=&quot;one&quot;&gt; &lt;/div&gt;
                &lt;div class=&quot;photo&quot; id=&quot;two&quot;&gt; &lt;/div&gt;
                &lt;div class=&quot;photo&quot; id=&quot;three&quot;&gt; &lt;/div&gt;
                &lt;div class=&quot;photo&quot; id=&quot;four&quot;&gt; &lt;/div&gt;
                &lt;span class=&quot;stretch&quot;&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div id=&quot;footer&quot;&gt;
                &lt;button id=&quot;about&quot;&gt; ABOUT &lt;/button&gt;
                &lt;button id=&quot;contact&quot;&gt; CONTACT &lt;/button&gt;
            &lt;/div&gt;
        &lt;/body&gt;
    &lt;/html&gt;
    
</code></pre>
<pre><code>

    body {
        overflow: hidden; /*prevents scrolling*/
        font-family: courier;
    }
    
    div {
        width: 98vw;
    
    }
    
    p{
        font-size: 8vh;
    
    }
    span {
        font-size: 15vh;
    }
    sup {
        font-size: 8vh;
    }
    
            
    #header {
        border: 2px solid black;
        height: 20vh;
        padding: 0;
    }
    
    
    #main {
        border: 2px solid red;
        height: 60vh;
        margin-top: 5vh;
        margin-bottom: 5vh;
        padding: 0;
        text-align: justify; /*justify*/
    }
    .stretch { /*justify*/
        width: 100%;
        display: inline-block;
    }
    
    .photo {
        border: 2px solid black;
        height: 100%;
        display: inline-block;
        vertical-align: top;
        width: 20vw;
        margin-left: 1%;
        margin-right: 1%;
        background-repeat: no-repeat;
        background-image: url(
            http://www.publicdomainpictures.net/pictures/10000/nahled/1001-12380278201dXT.jpg);
    }
    
    #footer {
        border: 2px solid blue;
        height: 10vh;
        bottom: 0;
    }

</code></pre>