php - 索引页脚很古怪

Question

我是编程/Web 开发的新手(这基本上是我的第一个网站)并且出于某种原因，我在 index.php 页面上的页脚顶部没有任何填充(页脚的每个其他页面都是完美的)很好)。

索引.php

<?php 
include('includes/header.php');
?>

<div class="main-body">
    <div id="box-1">
        <h2>WELCOME TO</h2>
    </div>
    <div id="box-2">
        <h2>TOTALLY<br> EDUCATIONAL</h2>
    </div>
</div>

<?php 
    include('includes/footer.php') 
?>

footer.php

<footer>
    <h5>© 2019 Totally Educational. All Rights Reserved.</h5>
</footer>

</body>
</html>

style.css(索引)

/*INDEX PAGE*/

/*side-by-side box structure*/

.main-body {
    box-sizing: border-box;
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 10px;
    text-align: center;
}

#box-1 {
    width: 49.5%;
    background-color: rgba(126,121,121,1.00);
    float: left;
    height: 600px;
    border-right: solid;
    border-right-width: 2px;
}

#box-2 {
    width: 50%;
    background-color: white;
    float: left;
    height: 600px;
}

/*side-by-side box styling*/

#box-1 h2 {
    padding: 300px 0;
    letter-spacing: 5px;
    color: white;
}

#box-2 h2 {
    padding: 300px 10%;
    letter-spacing: 5px;
}

style.css(页脚)

#footer, #footer h5 {
    background-color: black;
    color: white;
    padding: 20px 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

以上是与问题相关的所有 PHP 和 CSS。基本上，当我运行它时，索引页脚 h4 顶部没有填充，下面有一条白色 strip 。对于其他所有页面，没有出现此问题，仅在 index.php 中出现。我在 3 天左右的时间内写下了所有这些内容，我才刚刚开始学习所有内容，所以这可能是我做过的一些愚蠢的新事物，但我们将不胜感激。我还会附上一些它的外观图片。

index.php screenshot
games.php screenshot

-jEK01

Answer 1

尝试对 .main-body 使用 inline-block，并将 clear:both; 添加到 #footer:

.main-body {
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 10px;
    text-align: center;
}
#footer, #footer h5 {
  background-color: black;
  clear:both;
  color: white;
  padding: 20px 0;
  margin: 0;
  text-align: center;
  width: 100%;
}