Mobile header CSS for background color

Hi sqaurespace community, I need some help please putting a semi-transparent colour behind the homepage header on mobile views.

I can get it to work as wanted when i use the code inspector on Google chrome but not when entering the same code to the Squarespace page. Any assistance valued, thanks!

The website is:

https://www.firstpeoplesleading.com.au/

PW: Callan

Mobile header CC I'm using is:

@media only screen and (max-width: 640px){
.header {
background-color: rgb(255, 255, 255, .5);

Thanks,

First screenshot shows how it looks with the above code showing in the header. The second screenshot shows what I'd like it to look like (less the code on the page).
}
}

Hi,

The code appears in top of site because you added it to Code Injection, you should add it to Custom CSS

Thank you, I had tried that and I get no response to the mobile header code. See screenshots of what I have tried in the custom CSS section. I've tried the following:

@media only screen and (max-width: 640px){
#collection-652f8e9dea52a52756969ded
.header {
background-color: rgb(255, 255, 255, .5);
  }
}

And

@media only screen and (max-width: 640px){
.header {
background-color: rgb(255, 255, 255, .5);
  }
}