Media Query Within CSS Rule

I am wondering why I can’t get the following media query within a CSS rule to work. I saw this method being used in the “Build a project landing page” project example on codepen. (Which I can’t link to since this is my first post.)

width: 90%;
margin-left: auto;
margin-right: auto;
@media (max-width: 480px) {background-color: lightgray;}

Normally I would put all of my media query rules at the bottom of the CSS file in the same media query, but I thought this way of doing it would be better in certain cases.

Can anyone see what I am doing wrong here?

Thank you.

Because it’s not CSS, it’s SCSS (you can select it by clicking gear icon in codepen).

syntax for media:

@media(min or max px dimensions){
atribute: value;

keep in mind that you can style multiple elements within that query and each element can have multiple attributes
Happy coding