Weird overflow/ extra scroll appeared after adding logo load to home page

Hi, 

I've added a logo load/ logo animation video to the start of my homepage. Upon adding this, I've been experiencing some weird padding/ margin issues & a weird overflow/ empty scrolling on this page specifically. I can't seem to get rid of it. I've just tried: 

html, body {
    overflow-x: hidden;
}

but this doesn't seem to work. Please help 😧

Can you share your website URL and site wide password if it's not live?

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

Can you share the CSS you've added, I'm not sure where the overflow is coming from.

You have a lot of absolute top/bottom values, I would try commenting all of those out and seeing how that effects it. I can't say for sure what will have a positive/negative impact.

So I fixed the overflow using this on specific pages

body {
    overflow-y: hidden;
}

However, there's still a weird margin/ bar on the top that I can't seem to get rid of. I was able to fix the bottom margin and cover that using actually one of the codes you sent to someone ages ago 😅

#collection-65041c8b6b144c5e59560295 {
  #footer-sections {
    display:none;
  }
  .page-section {
    height:100vh;
    overflow:hidden;
  }
}

Any idea what the extra padding/ margin there might be? 

Thank you so much for your help!

5 minutes ago, theproper said:

Any idea what the extra padding/ margin there might be? 

I can't find any overflow when I look.

Oh sorry I'm not quite sure what it's called but this is what it looks like

That weird bar on the top of the page. 

I've tried toying around with the other values as well, doesn't seem to have any effect on this. 

I’ve figured it out! 

Added in:

.page-section {
      position: unset;

      display: flex;

      }
 

it seemed to work! Thank you so much for your help Ziggy!