Margin-top работает некоректно (HTML/CSS), в чем ошибка?

Question

Ernest Avakian @Lengdon

Simple guy

HTML
CSS

Margin-top работает некоректно (HTML/CSS), в чем ошибка?

Новичок:)
Делаю сайт и столкнулся с такой проблемой: мой div class="middle=text" по задумке должен делать 100px отступа от картинок над ним, но по итогу эти 100px пустого пространства появляются вверху сайта.
Что я делаю не так и как это исправить?:)

Мой HTML код:

<!DOCTYPE html>
<html leng="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Bla-bla-bla">
        <title>Heroes</title>
        <link rel="stylesheet" type="text/css" href="/style.css">
        <link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
    </head>
    
    <body>
              <div class="header">
               <ul class="main-navigation">
                    <li class="col"><p>Heroes</p></li>
                    <li class="col"><a href="#gerald">Gerald of Rivia</a></li>
                    <li class="col"><a href="#hawke">Hawke</a></li>
                    <li class="col"><a href="#corvo">Corvo Attano</a></li>
                    <li class="col"><a href="#batman">Batman</a></li>
                </ul>
                </div>
                
                
                <div class="four-backgrounds">
                    <ul class="picture-showcase">
                        <li>
                            <figure class="game-photo">
                                <img src="img/1.jpg">
                            </figure>
                        </li>
                        <li>
                            <figure class="game-photo">
                                <img src="img/2.jpg">
                            </figure>
                        </li>
                    </ul>
                    <ul class="picture-showcase clearfix">
                        <li>
                            <figure class="game-photo">
                                <img src="img/3.jpg">
                            </figure>
                        </li>
                        <li>
                            <figure class="game-photo">
                                <img src="img/4.jpg">
                            </figure>
                        </li>
                    </ul>
                </div>
                
                <div class="middle-text">
                    <h2>Reeeaaaly <span class="epic-word">epic</span> heading about these heroes and videogames!</h2>
                    <p class="long-copy"> Come om, please. I mean come on. Come om, please. I mean come on. Come om, please. I mean come on. Come om, please. I mean come on. Come om, please. I mean come on. Come om, please. I mean come on. Come om, please.  </p>
                </div>
            
  
    </body>
    
   
</html>

И мой CSS код:

/* ------------------------------------------------ BASE FOR WHOLE WEBSITE ------------------------------------------------- */

html,
body {
    font-family: "IM Fell English SC";
    font-size: 30px;
    margin: 0;
    padding: 0;
    color: white;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ---------------------------------------------------- MAIN NAVIGATION ------------------------------------------------------ */

.main-navigation {
    width: 100%;
}

.main-navigation p {
    text-align: center;
    background-color: #70f4c7;
    border-bottom: 2px solid #01cbac;
}

.main-navigation li {
    display: block;    
    float: left;      
    width: 20%;
}

.main-navigation li a{
  display: block;
  text-align: center;
}

.main-navigation li a:link,
.main-navigation li a:visited {
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.7s; 

    
}

.main-navigation li a:hover,
.main-navigation li a:active {
    border-bottom: 2px solid #01cbac;
    background-color: aquamarine;
    color: white;
    
}



/* ---------------------------------------------------- FOUR BACKGROUND PICTURES ------------------------------------------------------ */


.four-backgrounds {
    padding: 0;
}

.picture-showcase {
    list-style: none;
    width: 100%;
}

.picture-showcase li {
    display: block;
    float: left;
    width: 50%;
}

.game-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

.game-photo img {
    opacity: 0.7;
    width: 100%;
    height: auto;
    transform: scale(1.15);
    transition: transform 0.5s, opacity 0.5s;
}
    
.game-photo img:hover {
    transform: scale(1.07);
    opacity: 1;
}



/* --------------------------------------------------------- MIDDLE TEXT -------------------------------------------------------------- */

.middle-text {
    color: black;
    margin-top: 100px;
}


.middle-text .long-copy {
    margin-bottom: 30px;
}