css inside @media

Hi, I have created a template and I assign a class to one of my divs (<div class=”left-book”>)
On the style.css when I type: .left-book {background-color: #ff0000;} it works fine, but I’m trying to put it inside the (@media max-width) functions in order to assign different css to it as the screen size changes on the different users, but when I type .left-book {background-color: #ff0000;} inside this @media thing it doesn’t do anything.

Please tell me how should I do this, thanks