Can't get Media Queries to Work

Question

I am trying to use media queries to make my layout responsive to the screen size. I'm just testing it out at the moment and I can't for the life of me get the method to work. I simply set up a media query that's supposed to change the background color of my links to red when the screen goes below 480px, but it just doesn;t work when I shrink my screen.

You can see this in action at http://www.noellesnotes.com

Any help would be appreciated.

Here's the relevent code:

HTML:

<div class="site-navigation">
    <a href="#">About</a>
    <a href="#">Work</a>
    <div class="site-title">Noelle Devoe</div>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
</div>

CSS:

.site-navigation a{
    width: 125px;
    float: left;
    padding: 50px 0 50px 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
}

.site-navigation a:hover{
    font-weight: bold;
    background-color: rgb(242,168,134);
    color: rgb(255,255,255);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}

@media only screen and (max-device-width: 480px) {
    .site-navigation a{
        background-color: red;
        }
    }

Answer 1

change your max-device-width to max-width

@media only screen and (max-width:480px){
  .site-navigation a {
        background-color: red;
  }
}

Should do the trick for you. Also a great page to look at is the media queries page on MDN