我网站的分屏功能不正常

Question

/* Split the screen in half */
.split {
    height: 100%;
    width: 50%;
    position: absolute;
    padding-top: 20px;
  }

   /* Hide from Chrome, Safari, and Opera */
.split ::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
.split {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  /* Control the left side */
.left {
    height: 50%;
    width: 50%;
    left: 0;
    background-color: #c25b56;
  }
  
  /* Control the right side */
.right {
    height: 50%;
    width: 50%;
    right: 0;
    background-color: #3d4c53;
  }
  
  /* If you want the content centered horizontally and vertically */
.centered {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

.holidays {
    background-color: #9d9996;
    margin: 0 auto 0 auto;
    font-size: 20px;
    margin-top: 120px;
  }

.festivals {
    background-color: #e6772e;
    margin: 0 auto 0 auto;
    font-size: 20px;
    margin-top: 120px;
  }

.holidays th,
.holidays td {
    border: 4px solid #74828f;
    padding: 6px 9px 6px 9px;
    width: 600px;
    text-align: center;
}

.holidays th {
    text-transform: uppercase;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background: linear-gradient(to bottom, #d0e17ac0, #f75555);
}

.festivals th,
.festivals td {
    border: 4px solid #f2c249;
    padding: 6px 9px 6px 9px;
    width: 600px;
    text-align: center;
}

.festivals th {
    text-transform: uppercase;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background: linear-gradient(to bottom, #d0e17ac0, #f75555);
}

.container {
    min-height: 100vh;
    position: relative;
}

<div class="navbar">
            <a href="Home.html" class="current">Home</a>
        </div>
     
        <main class="Home">
        <div class = "container">
        
        <div class="split left">
        <div class="centered">
        <h1 class="title" style = "color: #fef6eb;">HOLIDAYS</h1>
        </div>

        <table class="holidays">

            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
        </table>
        </div>

        <div class="split right">
        <div class="centered">
        <h1 class="title" style = "color: #ffffff;">FESTIVALS</h1>
        </div>
        <table class="festivals">

            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            <tr>
                <td><h3><a href="">St Patricks Day</a></h3></td>
            </tr>
            </table>
            </div>

            
        </main>
        <div class="push"></div>
    </div>
        

            <div class="footer">
                &copy; Random
            </div>

            </body>
            </html>

分屏不会一直到我的网页底部，左右两边都有空间。我包括 left: 0;右：0；在我的 CSS 文件中，但它的左右两边仍然有那个空间。

我希望它显示为在页脚之前结束的分屏，并且它不应该有任何左右空格