索引页脚很古怪

Question

I'm pretty new to programming/web development (this is my first website essentially) and for some reason, my footer on the index.php page does not have any padding on the top (every other page the footer is perfectly fine).

Index.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)

/*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, #footer h5 {
    background-color: black;
    color: white;
    padding: 20px 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

Above is all the PHP and CSS relevant to the problem. Basically, when I run it the index page footer h4 has no padding at the top and there's a white strip underneath it. For every other page, this problem didn't occur, only in the index.php. I wrote all this in the span of 3 or so days and I'm just starting to learn everything so it's probably some stupid newby thing I've done but any help would be much appreciated. I'll also attach some images of what it looks like.

index.php screenshot
games.php screenshot

-jEK01

Answer 1

Try use inline-block for .main-body, and add clear:both; to #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%;
}