Make footer rest at the very bottom of the page (remove the margin at the bottom and sides)

Site URL: https://cyan-snail-gt4d.squarespace.com/

Hi All, 

I'm trying to make the footer on my "test" website actually touch the bottom of the page, yet I cannot seem to make this happen. Using custom CSS to change the margin and padding doesn't work, although I'm able to get it to somewhat work if I make the #footer "fixed" as opposed to relative or absolute. My header is fixed aswell, and that actually makes it stick to the top and take up the true full width of the page.  (Note: I'm using the Wexley template as a base) 

On both the header and the footer, if I change it from fixed to relative, all of a sudden the margins on all sides reappear--despite me setting the margins to 0px. Is there a way to make the footer touch the very bottom of the page and extend the full width of the page WITHOUT it being set to "fixed"?

I've attached a screenshot showing the header, footer and red "X" marks on the sides and bottom to show the gap I would like to eliminate. I'd like the footer to look like the header without it needing to be fixed.

Any help would be appreciated! 

(The password to the site is: 123)

May you try this custom css 

#pageWrapper, #canvas {
  padding: 0;
}
#mainContent {
  padding: 0 60px;
}
#footer {
  overflow: hidden;
}

Thanks so much, bangank36--that worked perfectly, but only on the portfolio page. Do you know why it's not applying correctly to the other pages?

3 hours ago, roem said:

Thanks so much, bangank36--that worked perfectly, but only on the portfolio page. Do you know why it's not applying correctly to the other pages?

Other page like blog has a white space for sidebar on the right, if you decided not need the sitebar so can use this to hide it

#pageWrapper, #canvas {
  padding: 0;
}
#mainContent {
  padding: 0 60px;
}
#footer {
  overflow: hidden;
}
.collection-type-blog.blog-sidebar-right #mainContent, .collection-type-blog.blog-sidebar-right #footerWrapper, .collection-type-blog.blog-sidebar-right .page-header {
  margin-right: 0;
}

Hi bangank36, 

That code doesn't seem to work either. The white margin still appears on the right. Same for the "About" page and "Contact" page. The only page that looks good is the "Portfolio" page for some reason. On the "Contact" page, the footer isn't even hitting the bottom either. 

I've inserted two pictures below.

*EDIT:  I seemed to have fixed the right-side margin problem by going into "Site Styles" and switching the "Page Width" from 1800px to 100% (I had to manually type in 100%).

The bottom margin still appears on the "contact" page though. And even though the width problem is solved, I'd still like to know why the manual CSS code wasn't working as well as why only the "Portfolio" page was working...any thoughts?

The template give space for sidebar, as you turned it off by change the css and contact page content simply too short so the footer is moved from bottom