Homepage, how do I limit the scroll to whats on the screen?

I'm curious how I lock my homepage to the background image and buttons. I've inserted custom CSS and there's still scroll room between my image and the bottom of the page. This code is inserted into the advanced screen of the home page. Thanks!

Here's my code:

<style> 
  #header, #footer { 
    display: none;
  } 
  a {
    filter: brightness(0) invert(1);
  }
  a:hover{
       filter: brightness(1) invert(0);
  }
  .sqs-block-button-element--small{background-color:transparent!important; background-size:contain!important; background-position:center;background-repeat:no-repeat!important;border-width:0!important;}
  
  @media only screen and (max-width: 768px){
     .fluidImageOverlay, img {
       display:none !important;
     }
    .section-background img {
        opacity: 0;
    }
    .section-background {
        background-image: url(https://static1.squarespace.com/static/645ad34ac7b0c30c47d1dccb/t/64650dbff2315e7e487074de/1684344255551/cc_bg_mobile.png);
          background-size: cover;
          background-position: top;
        background-repeat: no-repeat !important;
    }
}
</style>

Can you share site url?