Navigation/Header and media query issues

Alright so I have been having issues with my media queries and header/navigation for the past few days and I'm going insane. I am fairly new to web development and even more new to media queries. I have a feeling that there are a lot of mistakes and issues with this code, but I am still just trying to learn.

Here is the current section I am working on and for some reason only a few of the aspects work within this query (such as the red background in the div.container), but then others do not. Honestly at this point I am just trying to get the navigation and header to fit to the device. Also I am not sure why there is so much extra white space on each side of the div.container. I have definitely bit off more than i can chew with this, but I want to get the site to at least look decent for the time being. Some of these attributes have been added for the sake of seeing change so be gentle haha.

Basically the issue is that I cannot get the header/navigation to be responsive on the home page. It seems to be working on all other pages except for the home.

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  div.site-logo {
    width: 40%;
  }
  div.body {
    max-width: 1160px;
    width: 100%;
    background: blue;
  }
  /* Header */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    width: 100%;
    z-index: 1000;
    background: #FFFFFF;
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;
    margin: auto 0;
  }
  /* General Layout */
  div.container {
    width: 320px;
    background: red;
  }
  /* Content Area */
  article.post {
    border-bottom: 2px dotted #bbbbbb;
    height: 200px;
  }
  /*Main Column */
  .main-column {
    width: 100%;
  }
  /* Sidebar Column */
  .secondary-column {
    width: 30%;
    float: right;
  }
}

I also apologize in advance for my lack of knowledge when using this site. This is my first post.

here is the site

Solution

comment out width property of .site-header

.site-header {
/* width:100%;*/
}

Note: the source of your problem lies in your incorrect use of CSS properties i.e. using padding of <body> instead of margin on <div class="container">. because of it width:100% on .site-header will always give more width than actually visible.

By commenting out the property, you delegate the task of width specification to browser and Chrome(I checked in chrome only) correctly guessed the width required