что делать если футер залит не полностью

Всем здравствуйте. Решил сделать футер в проекте, но он почему то залит не полностью

Вот код футера: style.css

.footer {
    margin-top: auto;
    background-color: rgb(57, 57, 57);
    color: #fff;
}

.games {
    min-height: 100vh;
}

.footer .text {
    padding: 20px;
}

.links {
    height: 80px;
    width: 80px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}

footer.html

<div class="footer">
    <div class="center2">
        <a href="link"
            ><img
                class="links"
                src="https://static-00.iconduck.com/assets.00/shikimori-icon-1986x2048-oorozjw7.png"
                alt=""
        /></a>
        <a href="https://steamcommunity.com/id/.../"
            ><img
                class="links"
                src="https://static-00.iconduck.com/assets.00/steam-icon-2026x2048-3b7rynay.png"
                alt=""
        /></a>
    </div>
    <h3 class="center2 text">
        all the games here were chosen personally in my opinion
    </h3>
</div>

футер вставляется в самый низ страницы, в новый див. Пример:

<div>
    <p href="">какой то текст</p>
</div>
{% include 'footer.html' %}