Fix full screen background image on Squarespace page

I'm having issues getting background images to display full screen (take up the whole background space) with a Squarespace page. My CSS was working but somehow it stopped working and now I have a gap on the bottom of the screen. The issues i've been having with Squarespace and how it sets up HTML for you, so recreating this issue really does not help. Instead, you can view the page at richiequake.com and use the password Help123 to access it. This issue happens in the Desktop version and Mobile version of the page. This is my CSS for Desktop:

#collection-5de6d28545f1a7075b7a2741 #canvas{
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

For mobile I've been trying:

@media only screen and (max-width: 400px) {
  #collection-5de6d28545f1a7075b7a2741 .canvas{
    max-width: 100% !important;
    max-height: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

I think my issue is with an HTML element that is taking up the space at the bottom of the screen, but I can't find this element and have not found a way to have the background image take up the whole space. What do I need in my CSS code to fix this? Am I using CSS on the wrong HTML element?