css responsive width creating extra space in right margin

Question

I have a site with responsive css, with media queries at 768px, 480px, and 320px. When I resize below 1040px, same extra space appears on the right margin of the entire page and I can't figure out where this is coming from. This is for a WordPress site. Here's the jsfiddle link.

Here's some of the relevant css:

body,
html {
  height: 100%;
  width: 100%;
  margin-left: -.01em;
}
body {
  font-family: "ff-dagny-web-pro", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
  color: black;
}
#main {
  margin: 0 15%;
}
@media only screen and (max-width: 768px) {
  #main {
    margin: 0 10% 0 10%;
  }
}
@media only screen and (max-width: 480px) {
  #main {
    margin: 0 5% 0 5%;
  }
}
#content {
  float: left;
  width: 68%;
}
@media only screen and (max-width: 480px) {
  #content {
    width: 100%;
  }
}

Thanks in advance!

Answer 1

I found the offending object, width was a div buried in the middle of the page (social-icons) that wasn't being resize for smaller viewports. Thanks to everyone who helped keep me focused.