Media Query trouble

I am having trouble making content scale proportionally when it get to mobile devices.

On a desktop the site looks like this https://i.sstatic.net/wsbos.jpg (first image)

I set a media query to make it look like this (second image)

@media only screen and (max-width: 867px) {
#header-wrap{
padding: 0px 0px 0px;
max-height: 100%;
}

.right.nav {
    float: none;
}
.nav{   
}
ul {
display:inline-block;
padding: 0px 10px 0px;
min-width: 300px;
}
.left {
float: none;
}
.logo{
margin:auto

}
}

But when viewed on a mobile device it looks like the desktop (third image)

I am also trying to make the nav move from being floated right to aligned in the center once it hits the query but I don't know how to do so.

Here's the JS Fiddle http://jsfiddle.net/u9shm5af/

Solution

You need to add the viewport meta tag to the <head> section of the document:

<html>
  <head>
    <title>Robert Fikes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    ...
  </body>
</html>

Mobile browsers, without this tag, render web content at a fixed width, so that older sites that don't have responsive styles aren't cut off.

From the Safari Developer Library:

The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-10. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different.