Chrome Инструменты разработчика - добавление лишнего пробела вокруг страницы

Question

Когда я открываю Chrome Инструменты разработчика и просматриваю свою веб-страницу в разных размерах, по бокам / внизу страницы появляется белое пространство. Когда я обновляю sh страницу, это лишнее пространство исчезает.

Это также происходит, когда я меняю размер браузера. Навигационная и основная остаются на месте, но нижний колонтитул перемещается снизу вверх. Создание пустого пространства.

Это нормально или я что-то делаю не так с CSS? Могу ли я что-то сделать, чтобы убедиться, что все элементы остаются на своих местах, независимо от того, какую форму принимает браузер?

/* 1440p */
@media only screen and (max-width: 2560px), screen and (max-height: 1440px) {

    body {
        font-family: Helvetica;
        margin: 0;
        text-transform: capitalize;
    }
    
    li {
        list-style-type: none;
    }
    
    nav, main, section, footer {
        display: flex;
    }
    
    nav {
        background-color: #393e46;
        text-align: right;
        width: 100%;
        position: fixed;
        top: 0;
    }
    
    #nav-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
        width: 100%;
    }
    
    #nav-links li {
        display: inline;
    }
    
    #nav-links a:link {
        color: #e5e5e5;
        text-decoration: none;
    }
    
    #nav-links a:visited {
        color: #e5e5e5;
    }
    
    #nav-links a:hover {
        color: #32e0c4;
    }
    
    main {
        text-align: center;
    }
    
    #main-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
        padding: 18.05% 0%; /* changes */
    }
    
    /* controls the 'FGCPEDIA' masthead */
    #logo {
        color: #ff0000;
        font-size: 150px; /* changes */
        margin: 16px 0px 10px;
        text-align: center;
    }
    
    /* controls the input field */
    input {
        background-color: #f1f1f1;
        border: 1px solid #f4f6ff;
        border-radius: 25px;
        font-size: 15px;
        padding: 20px 0px;
        text-align: center;
        width: 100%;
    }
    
    /* removes the highlight from the form when selected */
    input:focus, textarea:focus {
        outline: 0;
    }
    
    .footer-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
    }
    
    #pre-footer-1 {
        background-color: #222831;
        margin: 0 auto;
        text-align: center;
    }
    
    #pre-footer-1-links {
        padding-inline-start: 0px;
    }
    
    #pre-footer-1-links li {
        display: inline;
    }
    
    #pre-footer-1-links a:link {
        color: #e5e5e5;
        font-size: 16px;
        margin: 16px 0px;
        text-decoration: none;
    }
    
    #pre-footer-1-links a:hover {
        color: #32e0c4;
        text-decoration: underline;
    }
    
    #pre-footer-2 {
        background-color: #222831;
        margin: 0 auto;
        width: 100%;
    }
    
    /* controls the links in the pre-footer */
    #pre-footer-2-links {
        margin: 0 auto;
        padding-inline-start: 0px;
    }
    
    #pre-footer-2-links li {
        display: inline;
        padding: 0px 8px;
    }
    
    #pre-footer-2-links a:link {
        color: #e5e5e5;
        display: inline;
        font-size: 15px;
        max-width: 100px;
        padding: 16px 0px;
        text-align: center;
        text-decoration: none;
    }
    
    #pre-footer-2-links a:visited {
        color: #e5e5e5;
    }
    
    #pre-footer-2-links a:hover {
        color: #32e0c4;
    }
    
    footer {
        background-color: #222831;
        width: 100%;
    }
    
    /* controls the copyright text */
    #copyright {
        color: #e5e5e5;
        font-size: 12px;
        margin: 16px 0px;
        text-align: center;
    }

}

/* 1080p */
@media only screen and (max-width: 1920px) {

    body {
        font-family: Helvetica;
        margin: 0;
        text-transform: capitalize;
    }
    
    li {
        list-style-type: none;
    }
    
    nav, main, section, footer {
        display: flex;
    }
    
    nav {
        background-color: #393e46;
        text-align: right;
        width: 100%;
        position: fixed;
        top: 0;
    }
    
    #nav-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
        width: 100%;
    }
    
    #nav-links li {
        display: inline;
    }
    
    #nav-links a:link {
        color: #e5e5e5;
        text-decoration: none;
    }
    
    #nav-links a:visited {
        color: #e5e5e5;
    }
    
    #nav-links a:hover {
        color: #32e0c4;
    }
    
    main {
        text-align: center;
    }
    
    #main-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
        padding: 14.71% 0%;
    }
    
    /* controls the 'FGCPEDIA' masthead */
    #logo {
        color: #ff0000;
        font-size: 150px; /* changes */
        margin: 16px 0px 10px;
        text-align: center;
    }
    
    /* controls the input field */
    input {
        background-color: #f1f1f1;
        border: 1px solid #f4f6ff;
        border-radius: 25px;
        font-size: 15px;
        padding: 20px 0px;
        text-align: center;
        width: 100%;
    }
    
    /* removes the highlight from the form when selected */
    input:focus, textarea:focus {
        outline: 0;
    }
    
    .footer-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
    }
    
    #pre-footer-1 {
        background-color: #222831;
        margin: 0 auto;
        text-align: center;
    }
    
    #pre-footer-1-links {
        padding-inline-start: 0px;
    }
    
    #pre-footer-1-links li {
        display: inline;
    }
    
    #pre-footer-1-links a:link {
        color: #e5e5e5;
        font-size: 16px;
        margin: 16px 0px;
        text-decoration: none;
    }
    
    #pre-footer-1-links a:hover {
        color: #32e0c4;
        text-decoration: underline;
    }
    
    #pre-footer-2 {
        background-color: #222831;
        margin: 0 auto;
        width: 100%;
    }
    
    /* controls the links in the pre-footer */
    #pre-footer-2-links {
        margin: 0 auto;
        padding-inline-start: 0px;
    }
    
    #pre-footer-2-links li {
        display: inline;
        padding: 0px 8px;
    }
    
    #pre-footer-2-links a:link {
        color: #e5e5e5;
        display: inline;
        font-size: 15px;
        max-width: 100px;
        padding: 16px 0px;
        text-align: center;
        text-decoration: none;
    }
    
    #pre-footer-2-links a:visited {
        color: #e5e5e5;
    }
    
    #pre-footer-2-links a:hover {
        color: #32e0c4;
    }
    
    footer {
        background-color: #222831;
        width: 100%;
    }
    
    /* controls the copyright text */
    #copyright {
        color: #e5e5e5;
        font-size: 12px;
        margin: 16px 0px;
        text-align: center;
    }

}

/* iPad Pro */
@media only screen and (max-width: 1024px) {
    
    body {
        font-family: Helvetica;
        margin: 0;
        text-transform: capitalize;
    }

    li {
        list-style-type: none;
    }

    nav, main, section, footer {
        display: flex;
    }

    nav {
        background-color: #393e46;
        text-align: right;
        width: 100%;
        position: fixed;
        top: 0;
    }

    #nav-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
        width: 100%;
    }

    #nav-links li {
        display: inline;
    }

    #nav-links a:link {
        color: #e5e5e5;
        text-decoration: none;
    }

    #nav-links a:visited {
        color: #e5e5e5;
    }

    #nav-links a:hover {
        color: #32e0c4;
    }

    main {
        text-align: center;
    }

    #main-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
        padding: 49% 0%;
    }

    /* controls the 'FGCPEDIA' masthead */
    #logo {
        color: #ff0000;
        font-size: 150px; /* changes */
        margin: 16px 0px 10px;
        text-align: center;
    }

    /* controls the input field */
    input {
        background-color: #f1f1f1;
        border: 1px solid #f4f6ff;
        border-radius: 25px;
        font-size: 15px;
        padding: 20px 0px;
        text-align: center;
        width: 100%;
    }
    
    /* removes the highlight from the form when selected */
    input:focus, textarea:focus {
        outline: 0;
    }

    .footer-container {
        margin: 0 auto;
        max-width: 775px; /* changes */
    }

    #pre-footer-1 {
        background-color: #222831;
        margin: 0 auto;
        text-align: center;
    }

    #pre-footer-1-links {
        padding-inline-start: 0px;
    }

    #pre-footer-1-links li {
        display: inline;
    }

    #pre-footer-1-links a:link {
        color: #e5e5e5;
        font-size: 16px;
        margin: 16px 0px;
        text-decoration: none;
    }

    #pre-footer-1-links a:hover {
        color: #32e0c4;
        text-decoration: underline;
    }

    #pre-footer-2 {
        background-color: #222831;
        margin: 0 auto;
        width: 100%;
    }

    /* controls the links in the pre-footer */
    #pre-footer-2-links {
        margin: 0 auto;
        padding-inline-start: 0px;
    }

    #pre-footer-2-links li {
        display: inline;
        padding: 0px 8px;
    }

    #pre-footer-2-links a:link {
        color: #e5e5e5;
        display: inline;
        font-size: 15px;
        max-width: 100px;
        padding: 16px 0px;
        text-align: center;
        text-decoration: none;
    }

    #pre-footer-2-links a:visited {
        color: #e5e5e5;
    }

    #pre-footer-2-links a:hover {
        color: #32e0c4;
    }

    footer {
        background-color: #222831;
        width: 100%;
    }

    /* controls the copyright text */
    #copyright {
        color: #e5e5e5;
        font-size: 12px;
        margin: 16px 0px;
        text-align: center;
    }
}

/* iPad */
@media only screen and (max-width: 768px) {
    
    body {
        font-family: Helvetica;
        margin: 0;
        text-transform: capitalize;
    }

    li {
        list-style-type: none;
    }

    nav, main, section, footer {
        display: flex;
    }

    nav {
        background-color: #393e46;
        text-align: right;
        width: 100%;
        position: fixed;
        top: 0;
    }

    #nav-container {
        margin: 0 auto;
        max-width: 545px; /* changes */
        width: 100%;
    }

    #nav-links li {
        display: inline;
    }

    #nav-links a:link {
        color: #e5e5e5;
        text-decoration: none;
    }

    #nav-links a:visited {
        color: #e5e5e5;
    }

    #nav-links a:hover {
        color: #32e0c4;
    }

    main {
        text-align: center;
    }

    #main-container {
        margin: 0 auto;
        max-width: 545px; /* changes */
        padding: 44.6% 0%;
    }

    /* controls the 'FGCPEDIA' masthead */
    #logo {
        color: #ff0000;
        font-size: 106px; /* changes */
        margin: 16px 0px 10px;
        text-align: center;
    }

    /* controls the input field */
    input {
        background-color: #f1f1f1;
        border: 1px solid #f4f6ff;
        border-radius: 25px;
        font-size: 15px;
        padding: 20px 0px;
        text-align: center;
        width: 100%;
    }
    
    /* removes the highlight from the form when selected */
    input:focus, textarea:focus {
        outline: 0;
    }

    .footer-container {
        margin: 0 auto;
        max-width: 545px; /* changes */
    }

    #pre-footer-1 {
        background-color: #222831;
        margin: 0 auto;
        text-align: center;
    }

    #pre-footer-1-links {
        padding-inline-start: 0px;
    }

    #pre-footer-1-links li {
        display: inline;
    }

    #pre-footer-1-links a:link {
        color: #e5e5e5;
        font-size: 16px;
        margin: 16px 0px;
        text-decoration: none;
    }

    #pre-footer-1-links a:hover {
        color: #32e0c4;
        text-decoration: underline;
    }

    #pre-footer-2 {
        background-color: #222831;
        margin: 0 auto;
        width: 100%;
    }

    /* controls the links in the pre-footer */
    #pre-footer-2-links {
        margin: 0 auto;
        padding-inline-start: 0px;
    }

    #pre-footer-2-links li {
        display: inline;
        padding: 0px 8px;
    }

    #pre-footer-2-links a:link {
        color: #e5e5e5;
        display: inline;
        font-size: 15px;
        max-width: 100px;
        padding: 16px 0px;
        text-align: center;
        text-decoration: none;
    }

    #pre-footer-2-links a:visited {
        color: #e5e5e5;
    }

    #pre-footer-2-links a:hover {
        color: #32e0c4;
    }

    footer {
        background-color: #222831;
        width: 100%;
    }

    /* controls the copyright text */
    #copyright {
        color: #e5e5e5;
        font-size: 12px;
        margin: 16px 0px;
        text-align: center;
    }
}

/* Surface Duo */
@media only screen and (max-width: 450px) {
    
    body {
        font-family: Helvetica;
        margin: 0;
        text-transform: capitalize;
    }

    li {
        list-style-type: none;
    }

    nav, main, section, footer {
        display: flex;
    }

    nav {
        background-color: #393e46;
        text-align: right;
        width: 100%;
        position: fixed;
        top: 0;
    }

    #nav-container {
        margin: 0 auto;
        max-width: 345px; /* changes */
        width: 100%;
    }

    #nav-links li {
        display: inline;
    }

    #nav-links a:link {
        color: #e5e5e5;
        text-decoration: none;
    }

    #nav-links a:visited {
        color: #e5e5e5;
    }

    #nav-links a:hover {
        color: #32e0c4;
    }

    main {
        text-align: center;
    }

    #main-container {
        margin: 0 auto;
        max-width: 345px; /* changes */
        padding: 32% 0%;
    }

    /* controls the 'FGCPEDIA' masthead */
    #logo {
        color: #ff0000;
        font-size: 67px; /* changes */
        margin: 16px 0px 10px;
        text-align: center;
    }

    /* controls the input field */
    input {
        background-color: #f1f1f1;
        border: 1px solid #f4f6ff;
        border-radius: 25px;
        font-size: 15px;
        padding: 20px 0px;
        text-align: center;
        width: 100%;
    }
    
    /* removes the highlight from the form when selected */
    input:focus, textarea:focus {
        outline: 0;
    }

    .footer-container {
        margin: 0 auto;
        max-width: 345px; /* changes */
    }

    #pre-footer-1 {
        background-color: #222831;
        margin: 0 auto;
        text-align: center; /* changes */
    }

    #pre-footer-1-links {
        padding-inline-start: 0px;
    }

    #pre-footer-1-links li {
        display: inline;
    }

    #pre-footer-1-links a:link {
        color: #e5e5e5;
        font-size: 16px;
        margin: 16px 0px;
        text-decoration: none;
    }

    #pre-footer-1-links a:hover {
        color: #32e0c4;
        text-decoration: underline;
    }

    #pre-footer-2 {
        background-color: #222831;
        margin: 0 auto;
        width: 100%;
    }

    /* controls the links in the pre-footer */
    #pre-footer-2-links {
        margin: 0 auto;
        padding-inline-start: 0px;
    }

    #pre-footer-2-links li {
        display: inline; /* added */
        padding: 0px 8px; /* added */
    }

    #pre-footer-2-links a:link {
        color: #e5e5e5;
        display: inline;
        font-size: 15px;
        max-width: 100px;
        padding: 16px 0px;
        text-align: center;
        text-decoration: none;
    }

    #pre-footer-2-links a:visited {
        color: #e5e5e5;
    }

    #pre-footer-2-links a:hover {
        color: #32e0c4;
    }

    footer {
        background-color: #222831;
        width: 100%;
    }

    /* controls the copyright text */
    #copyright {
        color: #e5e5e5;
        font-size: 12px;
        margin: 16px 0px;
        text-align: center;
    }
}

/* Pixel 2, Pixel 2 XL, iPhone 6/7/8 Plus */
@media only screen and (max-width: 414px) {
    
    body {
        font-family: Helvetica;
        margin: 0;
        text-transform: capitalize;
    }

    li {
        list-style-type: none;
    }

    nav, main, section, footer {
        display: flex;
    }

    nav {
        background-color: #393e46;
        text-align: right;
        width: 100%;
        position: fixed;
        top: 0;
    }

    #nav-container {
        margin: 0 auto;
        max-width: 245px;
        width: 100%;
    }

    #nav-links li {
        display: inline;
    }

    #nav-links a:link {
        color: #e5e5e5;
        text-decoration: none;
    }

    #nav-links a:visited {
        color: #e5e5e5;
    }

    #nav-links a:hover {
        color: #32e0c4;
    }

    main {
        text-align: center;
    }

    #main-container {
        margin: 0 auto;
        max-width: 245px;
        padding: 32.2% 0%; /* changes */
    }

    /* controls the 'FGCPEDIA' masthead */
    #logo {
        color: #ff0000;
        font-size: 47px;
        margin: 16px 0px 10px;
        text-align: center;
    }

    /* controls the input field */
    input {
        background-color: #f1f1f1;
        border: 1px solid #f4f6ff;
        border-radius: 25px;
        font-size: 15px;
        padding: 20px 0px;
        text-align: center;
        width: 100%;
    }
    
    /* removes the highlight from the form when selected */
    input:focus, textarea:focus {
        outline: 0;
    }

    .footer-container {
        margin: 0 auto;
        max-width: 245px;
    }

    #pre-footer-1 {
        background-color: #222831;
        margin: 0 auto;
    }

    #pre-footer-1-links {
        padding-inline-start: 0px;
    }

    #pre-footer-1-links li {
        display: inline;
    }

    #pre-footer-1-links a:link {
        color: #e5e5e5;
        font-size: 15px;
        text-decoration: none;
    }

    #pre-footer-1-links a:hover {
        color: #32e0c4;
        text-decoration: underline;
    }

    #pre-footer-2 {
        background-color: #1e242c;
        margin: 0 auto;
    }

    /* controls the links in the pre-footer */
    #pre-footer-2-links {
        margin: 0 auto;
        padding-inline-start: 0px;
    }

    #pre-footer-2-links a:link {
        color: #e5e5e5;
        display: block;
        font-size: 15px;
        max-width: 100px;
        padding: 16px 0px;
        text-align: center;
        text-decoration: none;
    }

    #pre-footer-2-links a:visited {
        color: #e5e5e5;
    }

    #pre-footer-2-links a:hover {
        color: #32e0c4;
    }

    footer {
        background-color: #222831;
    }

    /* controls the copyright text */
    #copyright {
        color: #e5e5e5;
        font-size: 12px;
        margin: 16px 0px;
        text-align: center;
    }
}

/* Galaxy Fold, iPhone 5/SE, Moto G4, Galaxy S5, iPhone 6/7/8, iPhone X */
@media only screen and (max-width: 375px) {
    
    body {
        font-family: Helvetica;
        margin: 0;
        text-transform: capitalize;
    }

    li {
        list-style-type: none;
    }

    nav, main, section, footer {
        display: flex;
    }

    nav {
        background-color: #393e46;
        text-align: right;
        width: 100%;
        position: fixed;
        top: 0;
    }

    #nav-container {
        margin: 0 auto;
        max-width: 245px;
        width: 100%;
    }

    #nav-links li {
        display: inline;
    }

    #nav-links a:link {
        color: #e5e5e5;
        text-decoration: none;
    }

    #nav-links a:visited {
        color: #e5e5e5;
    }

    #nav-links a:hover {
        color: #32e0c4;
    }

    main {
        text-align: center;
    }

    #main-container {
        margin: 0 auto;
        max-width: 245px;
        padding: 32.4% 0%;
    }

    /* controls the 'FGCPEDIA' masthead */
    #logo {
        color: #ff0000;
        font-size: 47px;
        margin: 16px 0px 10px;
        text-align: center;
    }

    /* controls the input field */
    input {
        background-color: #f1f1f1;
        border: 1px solid #f4f6ff;
        border-radius: 25px;
        font-size: 15px;
        padding: 20px 0px;
        text-align: center;
        width: 100%;
    }
    
    /* removes the highlight from the form when selected */
    input:focus, textarea:focus {
        outline: 0;
    }

    .footer-container {
        margin: 0 auto;
        max-width: 245px;
    }

    #pre-footer-1 {
        background-color: #222831;
        margin: 0 auto;
    }

    #pre-footer-1-links {
        padding-inline-start: 0px;
    }

    #pre-footer-1-links li {
        display: inline;
    }

    #pre-footer-1-links a:link {
        color: #e5e5e5;
        font-size: 15px;
        text-decoration: none;
    }

    #pre-footer-1-links a:hover {
        color: #32e0c4;
        text-decoration: underline;
    }

    #pre-footer-2 {
        background-color: #1e242c;
        margin: 0 auto;
    }

    /* controls the links in the pre-footer */
    #pre-footer-2-links {
        margin: 0 auto;
        padding-inline-start: 0px;
    }

    #pre-footer-2-links a:link {
        color: #e5e5e5;
        display: block;
        font-size: 15px;
        max-width: 100px;
        padding: 16px 0px;
        text-align: center;
        text-decoration: none;
    }

    #pre-footer-2-links a:visited {
        color: #e5e5e5;
    }

    #pre-footer-2-links a:hover {
        color: #32e0c4;
    }

    footer {
        background-color: #222831;
    }

    /* controls the copyright text */
    #copyright {
        color: #e5e5e5;
        font-size: 12px;
        margin: 16px 0px;
        text-align: center;
    }
}

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>title.com</title>
            <link href="css/stylesheet.css" rel="stylesheet">
        </head>

        <body>

            <!-- nav section -->
            <nav id="nav">
                <div id="nav-container">

                    <!-- nav links -->
                    <ul id="nav-links">
                        <li>
                            <a href="">Sign Up |</a>
                        </li>
                        <li>
                            <a href="">Log In</a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- main section -->
            <main>
                <div id="main-container">
                    
                    <!-- main row 1 -->
                    <div>
                        <h1 id="logo">BIG TITLE</h1>
                    </div>

                    <!-- main row 2 -->
                    <div>
                        <input type="search" placeholder="Search">
                    </div>

                </div>
            </main>

            <!-- sub footer 1 section -->
            <section id="pre-footer-1">
                <div class="footer-container">

                    <!-- browse the dicitionary links -->
                    <ul id="pre-footer-1-links">
                        <li>
                            <a href="pages/btd_pages/a.html" id="btd" style="text-transform: none;">Browse the Dictionary:</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/a.html">a |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/b.html">b |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/c.html">c |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/d.html">d |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/e.html">e |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/f.html">f |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/g.html">g |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/h.html">h |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/i.html">i |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/j.html">j |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/k.html">k |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/l.html">l |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/m.html">m |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/n.html">n |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/o.html">o |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/p.html">p |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/q.html">q |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/r.html">r |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/s.html">s |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/t.html">t |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/u.html">u |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/v.html">v |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/w.html">w |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/x.html">x |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/y.html">y |</a>
                        </li>
                        <li>
                            <a href="pages/btd_pages/z.html">z</a>
                        </li>
                    </ul>
                </div>
            </section>

            <!-- (4) pre-footer 2 section -->
            <section id="pre-footer-2">
                <div class="footer-container">

                    <!-- footer row 2 -->
                    <div>
                        <ul id="pre-footer-2-links">
                            <li>
                                <a href="index.html">Home</a>
                            </li>
                            <li>
                                <a href="pages/about_us.html">About Us</a>
                            </li>
                            <li>
                                <a href="pages/contact_us.html">Contact Us</a>
                            </li>
                            <li>
                                <a href="pages/terms_of_use.html">Disclaimer</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- (5) footer section -->
            <footer>
                <div class="footer-container">
                    <p id="copyright">&copy; 2020 copyright</p>
                </div>
            </footer>

            <!-- links to the js code -->
            <script src="js/script.js"></script>
        </body>
    </html>

Answer 1

Я вижу, у вас маржа: 0; для тела лишнего места добавлять не надо. Но попробуйте это:

* { margin: 0; height: 100vh;}