Specific Page Background Colour

Site URL: https://tsacstudios.squarespace.com/projects

Hey guys! i've been trying for ages to try and change the background colour of two pages on my site, the first page worked using this code in the header injection section: 

<style>
.Main {
background-color: #ccc !important;
}
.Header--bottom {
background-color: #ccc !important;
}
.Footer {
background-color: #ccc !important;
}
.Mobile-bar.Mobile-bar--top {
background-color: #ccc !important;
</style>

however when i went to do this for the /projects page nothing changed?

someone said the white background is overriding the grey on this page, but i'm not sure how to resolve this, thank you!

i've also tried doing it with the collection ID's in the custom CSS but it seemed to change the /projects page but change all the other headers and footers across the site.

SITE PW: brineintopedro

Add to Home > Design > Custom CSS

/* project page background */
section#project-1 {
    background: red !important;
}