Почему все содержимое моей домашней страницы переполняет границу тела?

Question

На моей домашней странице Kendall_Gregory.html моя граница тела игнорирует содержимое тела и устанавливает произвольную границу вокруг страницы. Он игнорирует каждое изображение, которое находится на странице, и divs вокруг них. Тот же код работает на других страницах, и я не могу понять, почему это исключение.

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%; 
} 

Answer 1

Причина ваш борд er не обертывает элементы изображения, потому что элементы изображения перемещаются и контейнер не очищается.

В любое время, когда вы плаваете изображение или любой другой объект, вы его вынимаете из normal flow. Это означает, что родительский контейнер даже не знает, что он существует.

Существует несколько способов решения этой проблемы –, известный как clearfix methods. В этом случае я использовал свойство overflow. Добавить overflow: auto в контейнер div s.

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

Я проверил этот код, и он решает проблему.

DEMO

Просто имейте в виду, что при использовании overflow собственности вы можете иметь различные значения (auto, hidden, scroll), каждый из которых будет иметь различный эффект, когда содержимое переполняет контейнер. Чтобы понять, какое значение вы можете найти в этой статье: MDN - CSS Overflow Property

Надеюсь, это поможет. Удачи!