Slight problem with iframe

Site URL: http://timbrown.photo/realestate

Hello everyone, 

I am a photographer with no coding knowledge and I'm currently working on updating my website. I have my main website, which is basically a display of my general work, and I have a separate portfolio, through Adobe, which is more specific to my main line of work. I found a way to integrate my Adobe portfolio with my Squarespace website, thanks to a code someone shared on another Squarespace forum, and I'm actually quite happy with how well it works with my site; however, there is a problem with the header and footer. While scrolling on this particular page, the header and footer move as you scroll, which doesn't happen on any other page. I would greatly appreciate some help in identifying the problem with the code I am using and help with fixing it. Any little advice is truly a big help. Thanks in advance.

- Tim 

<iframe src="https://timbrownrealestate.myportfolio.com/?iframe=1" width="100%" height="100%" frameborder="0" scrolling="0" style="position:fixed;" seamless="seamless" allowfullscreen="allowfullscreen"></iframe>

Try adding to Design > Custom CSS

body#collection-61fc685191ec62218a2ba0a9 #canvasWrapper {
    display: none;
}