css 响应宽度在右边距中创建额外的空间答案

【问题标题】：css responsive width creating extra space in right margincss 响应宽度在右边距中创建额外的空间
【发布时间】：2016-08-19 04:23:52
【问题描述】：

我有一个具有响应式 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%;
  }
}

提前致谢！

【问题讨论】：

看不到页面右侧的边距。你能指定哪个元素/标签有边距吗？
额外空间来自<div class="form-search">，请尝试添加响应式css。
嘿，artm，好收获。现在看来如此明显。非常感谢！
然后检查样式的“form-search”类。想知道设计应该是什么样子？因为我们现在知道它有正确的边距，但它应该是什么样子？

标签： css html wordpress responsive-design media-queries

【解决方案1】：

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

【讨论】：

出色的工作解决了您自己的问题。请将您的问题设置为已回答。

【解决方案2】：

在.form-search 上检查您的 CSS。你有一个固定的像素宽度219px 和margin-left 的80%。

.form-search {
  height: 14px;
  width: 219px;
  margin: 0em 0px 0px 80%;
  padding: 1em 0px 0px;
}

将像素宽度与百分比边距相结合是创建宽于 100% 的元素的可靠方法。

您是否尝试过使用网络检查器？它是 Web 调试不可或缺的一部分，我强烈建议您学习使用 Web 检查器，这样您就可以自己找到这些类型的问题（Stack Overflow 不是调试引擎）。

【讨论】：

感谢克里斯蒂安，非常感谢您的帮助。我正在使用 Firebug，但由于某种原因看不到这个。
好的，我已经去掉了 % 边距，但我仍然得到了很大的右边距，尤其是对于宽度
我可以去为你调试它（再次），但你不会学到任何东西。您需要检查每个元素并找出导致您出现问题的元素。尝试使用检查器删除元素，直到边距消失。您很快就会找出有问题的元素，然后您将能够检查属性以确定问题。
是的，是的，当然你是对的，我只是需要一点推动力。