Changing Section Background without changing footer

Hi All! 

I'm currently working on changing the background colour of a specific section. I have managed to target it, but it is also changing the footer background colour of my site? Anyone have any idea how to stop this?

Here is the code i am using: 

#collection-5f087542c703c07a2953ba3b {
.page-section:nth-child(1) {
background: rgb(255,249,76);
}
.page-section:nth-child(1) .section-background{background-color:transparent!important}
}

I am using squarespace 7.1 - unable to share link to site at this moment. 

Appreciate any help of advice in advance!

Thanks

footer.sections .section-background {background: red;}

Hey thanks for the reply! 

I've inserted the code as below but am not seeing any change to the footer? Any ideas?

#collection-5f087542c703c07a2953ba3b {
.page-section:nth-child(1) {
background: #fee578;
}
.page-section:nth-child(1) .section-background{background-color:transparent!important}
footer.sections .section-background {background: red;}

}