css 响应宽度在右边距创建额外空间

Question

我有一个带有响应式 CSS 的网站，媒体查询分别为 768 像素、480 像素和 320 像素。当我将大小时调整到 1040 像素以下时，整个页面的右边会出现相同的额外空间，我不知道这是从哪里来的。这是一个 WordPress 网站。这是 jsfiddle link .

这是一些相关的 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%;
  }
}

提前致谢!

Answer 1

我发现了有问题的对象，宽度是埋在页面中间的一个 div(社交图标)，它没有针对较小的视口(viewport)调整大小。感谢所有帮助我保持专注的人。