html - CSS div changes position on specific pages -

i'm having strange css problem main div container on website shifts right when visit pages. happens though there no specific css rule move it

i've uploaded temp version of site here: http://myawesometestsite.ddns.net/

when go publications , contact page entire container shifts right few pixels. position appears correct , unshifted on other pages

this full css i'm using:

body {     background-color: #dcd8cf;     font-family: raleway, arial, sans-serif;     font-size: 1em; }  h1 {     font-size: 1.5em;     color: #832c00;     margin-bottom: 30px; }  h2 {     font-size: 1.2em;     color: #832c00;     margin-top: 30px; }  h3 {     font-size: 1em;     margin-bottom: 5px;     margin-top: 20px; }  h4 {     font-size: 1em;     font-style: italic;     margin-top: 0px;     margin-left: 10px;     margin-bottom: 5px; }   .container {     position: relative;     left: 50%;     margin-left: -470px;     width: 940px;     border: 1px solid black; }   /* header */  header {     position: relative;     display: inline-block;     width: 100%;     height: 180px;     background-color: #a63700; }  header h1 {     position: absolute;     font-size: 2.5em;     color: #e6e6dc;     top: 50px;     left: 100px;     margin: 0px; }  header h2 {     position: absolute;     font-size: 0.77em;     color: #e6e6dc;     top: 100px;     left: 100px;     margin: 0px;     opacity: 0.7; }  header img {     border: 2px solid #e6e6dc;     border-radius: 50%;     max-width: 100%;      max-height: 100%; }  .profileimage {     display: block;     margin-left: auto;     margin-right: auto;     margin-top: 10px;     max-width: 150px;      max-height: 150px; }  .skillicons {     position: absolute;     right: 25px;     top: 15px; }  .skillicons img {     display: inline;     width: 75px;     height: 75px;     padding: 5px;     margin: 15px;     opacity: 0.7; }  /* navigation menu */  nav {     position: relative;     z-index: 1;     text-align: center;     letter-spacing: 2px;     background-color: #a63700;     height: 50px;     width: 100%; }  nav {     position: relative;     top: 20px;     color: #d1d1c9;     text-decoration: none;     padding: 0 30px; }  nav a:hover {     border-bottom: solid 1px #e6e6dc;     padding-bottom: 3px; }  .navselected {     text-shadow:0px 0px 1px white;     color: white; }    /* main content */  main {     position: relative;     background-color: white;     padding: 10px; }   /* footer */  footer {     position: relative;     color: #e6e6dc;     background-color: #a63700;     font-size: 10pt;     padding: 10px; }  .leftfooter ul {     padding-left: 0px; }  .leftfooter li {     display: inline;     list-style-type: none; }  .leftfooter li {     color: #e6e6dc;     text-decoration: none; }  .leftfooter li + li:before {     color: #e6e6dc;     content: "|";     padding: 10px; }  .rightfooter {     position: absolute;     right: 10px;     top: 4px; }  .rightfooter img {     display: inline;     max-width: 30px;     max-height: 30px;     vertical-align: middle;     margin-top: -3px; }  .copyright {     font-size: 1em; }   /* home page */     /* publications page */  .hangingindent {     padding-left: 1.5em;     text-indent:-1.5em; }  .publications h2 {     margin-top: 50px; }   /* code page */  .codeprojects {     color: #a63700;     text-decoration: none; }  .codeprojects a:hover {     text-decoration: underline; }  .codeprojects p {     margin-left: 10px; }   /* cv page */  .cvcontainer {     width: 90%;     margin: 0 auto; }  .cventry {     margin-bottom: 30px;     margin-left: 20px;     margin-right: 20px; }  .sectionheading {     width: 100%;     border-bottom: 1px solid #000; }  .alignleft {     display: block;     float: left;     text-align: left;     width: 80%;     margin-top: 10px; }  .alignleft p {     font-size: 1em; }  .alignleftsub {     margin-top: -10px;     margin-left: 20px; }  .alignright {     display: block;     float: right;     text-align: right;     width: 20%;     margin-top: 10px; }  .clear {     clear: both; }   /* contact page */  .contactinfo {     margin-left: 20px; }  .contactinfo img {     display: inline;     max-width: 30px;      max-height: 30px;     vertical-align: middle; }  .emailhidden {     display: none; }  .contactinfo {     margin-left: 5px;     color: #a63700;     text-decoration: none; }  .contactinfo #emailaddress {     margin-left: 2px; }  .contactinfo #emailaddress {     margin-left: 8px; }   /* media queries */   @media screen , (max-width : 940px) {      .container {         position: relative;         left: 0px;         margin: 0px;         width: 100%;     }      header h1 {         left: 5%;         margin: 0px;     }      header h2 {         left: 5%;         margin: 0px;     }      .skillicons img {         max-width: 70px;         max-height: 70px;         margin-left: 5px;         margin-right: 0px;     }  }  @media screen , (max-width : 800px) {      header h1 {         display: none;     }      header h2 {         display: none;     }      .skillicons img {         display: none;     }      nav {         height: 150px;     }      nav {         display: block;     }      nav a:hover {         border-bottom: none;         padding-bottom: 0px;     }  }  @media screen , (max-width : 600px) {      .rightfooter {         position: relative;         display: block;         margin-left: 10px;     }  } 

i don't believe there's in here that's causing container shift 2 pages maybe i'm missing something. have idea whats causing this?

add "overflow-y: scroll;" "body" selector. should in css:

body {     background-color: #dcd8cf;     font-family: raleway, arial, sans-serif;     font-size: 1em;     overflow-y: scroll; }