Automatic Logo slideshow

Hey I am trying to create a logo slideshow using gallery block, it seems to work fine on desktop but I have weird spacing on mobile. See the photo attached. I also noticed that the code I'm using is creating white space at the bottom of About Us page. The weirdest part about it is if I move any of the other sections to the bottom of the page to replace the (lilac one) the space disappears, if i move the video higher the space also disappears, if I remove the logo code it also disappears and it only affect this section.

Website url: https://gia-homepage.squarespace.com/

password: demo

Here is the code im using: 

#page {

overflow-x:hidden

}

.gallery-grid-wrapper {

display:flex !important;

animation: slideshow 60s linear infinite

}

.gallery-grid-wrapper .gallery-grid-item {

min-width: 18%;

margin-right: 5%

}

@keyframes slideshow {

  0%    { left: 0; }

  100%  { left: -150%; }

}

Thank you, it fixed it. I ended up moving the section with the video a bit up on the page and it masked the spacing