repositioning elements with media queries

Question

I would like to reposition some elements when the size screen changes, exactly like here : http://jsfiddle.net/KAz2u/ I have a logo on the left and a navigation toolbar on the right for wide screens and I want them both to appear on the middle of the page for small screens.

Here is a part of my CSS code

.logo{
  width: 70px;
  position: fixed;
  top: 15px;
  left: 30px;}

nav{
  position: fixed;
  right: 35px;
  top: 50px;
  font-family: "Brown-Regular";
  word-spacing: 3px;
  letter-spacing: 1px;
  font-size: 8pt;
  z-index: 1;}

@media(max-device-width: 480px){
.logo{
  position:relative;
  display: block;
  margin: 0 auto;
  top: 10px;
  left: 0;
  }

nav{
  position: relative;
  display: block;
  margin: 0 auto; 
  top: 50px;
  right: 0;
  word-spacing: 70px;
  }
}

And this is at the beginning of my HTML code :

<img class="logo" src="pics/logo.svg" alt="logo" />
<nav><a href="index.html">WORK</a>
<a href="mailto:">CONTACT</a> 
<a href="#infos">INFOS</a></nav>

Unfortunately it is not working as I want, the elements are not centered, they go a little bit to the left (on mobile phone) I don't see what is wrong. Thank you for your help!

Answer 1

Use @media screen and(max-width: 480px){

that should work

Answer 2

Use max-width instead of max-device-width in the media query