[FIXED] Why is all content on my home page overflowing the body border?

Issue

On my home page Kendall_Gregory.html, my body border is ignoring the contents in the body and setting an arbitrary border around the page. It ignores every image that is on the page and the divs around them. The same code works on other pages and i can't figure out why this is the exception.

https://jsfiddle.net/hgaLsaz6/3/

HTML

<div>
    <a href="Html/MenuPage.html">
        <img id="topMenu" src="http://s4.postimg.org/7636jv04p/menu_Top.png">
    </a>
</div>

<img id="headerImage" src="http://s16.postimg.org/uqbzk51yd/Header.png">

<div class ="card">
    <div class="no-hover"> 
        <!-- <span class = "caption"> Fade </span> -->
        <img class="left Fade" src="http://s16.postimg.org/monr28j6t/Fade_Mag.png">
        <!-- hover image -->
    </div>
    <div class="on-hover">
        <a href="Html/Fade.html">
            <img class="left Fade" src="http://s21.postimg.org/o0f1chw13/Xenia_Lally_Hover.png">
        </a>
    </div>
</div>


<!-- GE -->

<div class ="card">
    <div class="no-hover"> 

        <!-- <span class = "caption"> GE </span> -->
        <img class="whiteOverlay right GE" src="http://s16.postimg.org/6vislrw9x/image.png">
    </div>
    <div class="on-hover">
        <a href="Html/GE.html">
            <img class="whiteOverlay right GE" src="http://s21.postimg.org/6yhlwnrs7/GE_hover.png">
        </a>
    </div>
</div>


<!-- Kaleidoscope -->
<div class ="card">
    <div class="no-hover"> 
        <img class="left KALEIDOSCOPE " src="http://s16.postimg.org/5fcc0qzol/KALEIDOSCOPE_Thumb.png">

    </div>
    <div class="on-hover mt100">
        <a href="Html/Pantene.html">
            <img class="left KALEIDOSCOPE" src="http://s16.postimg.org/7q5c7t44l/KALEIDOSCOPE_Thumb_hover.png">
        </a>
    </div>
</div>

<!-- AOHH -->

<div class ="card">
    <div class="no-hover"> 
        <img class="right ArtofHealthyHair" src="http://postimg.org/image/n7subiald/">

    </div>
    <div class="on-hover">
        <a href="Html/AOHH.html">
            <img class=" right ArtofHealthyHair" src="http://s21.postimg.org/u56jpto4n/Artof_Healthy_Hair_Hover.png">
        </a>
    </div>
</div>  

<!-- Nexxus  -->
<div class ="card mt100">
    <div class="no-hover mt100"> 
        <img class=" left Nexxus" src="http://s16.postimg.org/e05nrx9ut/Nexxus.png">

    </div>
    <div class="on-hover mt100">
        <a href="Nexxus.html">
            <img class="left Nexxus" src="http://s21.postimg.org/g00qo0f3b/Nexxus_Hover.png">
        </a>
    </div>
</div>  


<!-- Covergirl -->
<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay right CoverGirl" src="http://s16.postimg.org/lh9ta0t2d/Cover_Girl.png">

    </div>
    <div class="on-hover">
        <a href="Html/CoverGirlByKendallG.html">
            <img class="whiteOverlay right CoverGirl" src="http://s21.postimg.org/6n05jwbc7/Cover_Girl_Hover.png">
        </a>
    </div>
</div>  

<!-- PRTR -->

<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay left PRTR" src="http://s16.postimg.org/ee6zrityd/PRTR.png">
    </div>
    <div class="on-hover">
        <a href="Html/RTR.html">
            <img class="whiteOverlay left PRTR" src="http://s21.postimg.org/edbj2s31j/RTR_Hover.png">
        </a>
    </div>
</div>

<!-- Pantene -->
<div class ="card">
    <div class="no-hover"> 
        <img class="whiteOverlay right Pantnene" src="http://s16.postimg.org/3xqvp6uxx/Pantnene.png">
    </div>
    <div class="on-hover">
        <a href="Html/Pantene.html">
            <img class="whiteOverlay right Pantnene" src="http://s16.postimg.org/wia0c5rmt/WIOL_Hover.png">
        </a>
    </div>
</div>

CSS

body{
    margin: 0px;
    border: black 10px solid;
    font-family: 'brandon_grotesque_regularRg', Arial, sans-serif;
    line-height: normal;
}


a{
    text-decoration: none;
    color: black;
}

#topMenu{
    right: 20px;
    position: fixed;
    letter-spacing: 4px;
    z-index: 24;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";

}

.MenuBar{
    text-align: center;
    width: 65%;
    margin:17 auto;
    text-decoration: none;
    letter-spacing: 2px;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";


}
.consocials{
    bottom: 40;
    margin-left: 70px;
    margin-right: 70px;
    width: 80%;
    text-decoration: none;
}

.consocials:hover{
    border-bottom:solid black 2px;
    padding-bottom: 20px;
    text-decoration: none;
    color: black;   
}

.socials{
    margin-right: 20px;
    margin-left: 20px;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
}
.socials:hover{
    border-bottom:solid black 2px;
    padding-bottom: 15px;
    text-decoration: none;
    color: black;

}

.socials:active{
    text-decoration: none;
    color: black;
}

.center{
    text-align: center;
    margin: 0 auto;
}

.left{
    float: left;
    margin-left: 70px;
}

.right{
    float: right;
    margin-right: 70px;
}
.rightNoMargin{
    float: right;   
}

.bottom{
    bottom: 30px;
}

.hide{
    display: none;
}

.m0a{
    margin: 0 auto;
}
.m10a{
    margin: 10 auto;
}
.h100{
    height: 100%;
}

.w100{
    width: 100%;
}
.w85{
    width: 85%;
}

.w50{
    width: 50%;
}
.w49{
    width: 49%;
}

.w40{
    width: 40%;
}
.mb200{
    margin-bottom: 200px;
}

.mb100{
    margin-bottom: 100px;
}

.pb30{
    padding-bottom: 30px;
}

.FloatL{
    float: left; 
}

.FloatR{
    float: right; 
}

.tAc{
    text-align: center;
}

.iLb{
    display: inline-block;
}

.m3{
    margin-top: 3px;
}

.h90{
    height: 90%;
}
.h850p{
    height: 850px;
}


.vA{
    vertical-align: center;
    height: 100%;
}

.h75{
    height: 60%
}

.pl20p{
    padding-left: 19%;
}

.pR100px{
    padding-right: 75px;
}

.w450{
    width: 450px;
}

.absolute{
    position: absolute;
}
.relative{
    position: relative;
}

.mnh100{
    min-height: 100px;

}

.mt100px{
    margin-top: 100px;
}

.mt200px{
    margin-top: 200px;
}
.h700{
    height: 700px;
}

.h800{
    height: 800px;
}

.w89{
    width: 89%;
}

.mT20{
    margin-top: 20%;
}

.mt50p{
    margin-top: 50%;
}

Solution

The reason your border isn't wrapping the image elements is because the image elements are floated and the container hasn't been cleared.

Anytime you float an image or any other object you take it out of the normal flow. This means that the parent container doesn't even know it exists.

There are several ways to address this issue – known as clearfix methods. In this case I've used the overflow property. Add overflow: auto to the container divs.

.no-hover {overflow: auto;}
.on-hover {overflow: auto;}

I tested this code and it solves the problem.

DEMO

Just keep in mind that when using the overflow property you can have different values (auto, hidden, scroll) each of which will have a different effect when content overflows the container. To understand what each value does you can refer to this article: MDN - CSS Overflow Property

Hope this helps. Good luck!

Answered By - Michael Benjamin

Answer Checked By - David Marino (PHPFixing Volunteer)