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

css响应宽度在右边距中创建额外空间,css,html,wordpress,responsive-design,media-queries,Css,Html,Wordpress,Responsive Design,Media Queries,我有一个带有响应css的站点,在768px、480px和320px上有媒体查询。当我将大小调整到1040px以下时,整个页面的右边距上会出现相同的额外空间,我不知道这是从哪里来的。这是一个WordPress网站。这是我的建议 以下是一些相关的css: body, html { height: 100%; width: 100%; margin-left: -.01em; } body { font-family: "ff-dagny-web-pro", sans-serif;

我有一个带有响应css的站点,在768px、480px和320px上有媒体查询。当我将大小调整到1040px以下时,整个页面的右边距上会出现相同的额外空间,我不知道这是从哪里来的。这是一个WordPress网站。这是我的建议

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

提前谢谢

.formsearch
上检查css。您的固定像素宽度为
219px
,左边的
边距为
80%

.form-search {
  height: 14px;
  width: 219px;
  margin: 0em 0px 0px 80%;
  padding: 1em 0px 0px;
}
将像素宽度与百分比边距相结合是创建宽度大于100%的元素的可靠方法


您是否尝试过使用web检查器?这是web调试不可或缺的一部分,我强烈建议您学习使用web检查器,这样您就可以自己发现这些类型的问题(堆栈溢出不是调试引擎)

>P>我发现了冒犯对象,宽度是一个div,埋藏在页面中间(社交图标),而不是为较小的视口调整大小。感谢所有帮助我集中精力的人。

看不到页面右侧的边距。您可以指定哪个元素/标记有边距吗?额外的空间来自
,请尝试将响应css添加到该元素/标记。嘿,artm,很好。现在看来这是显而易见的。非常感谢!然后检查样式的“表单搜索”类。想知道设计应该是什么样子吗?因为我们现在知道它有边缘,但它应该是什么样子?谢谢Christian,我真的很感谢你的帮助。我正在使用Firebug,但出于某种原因,我看不到这一个。好吧,我已经去掉了%的利润率,但我仍然得到了很大的利润率,特别是对于小于480px的设备。在320px的范围内,该站点只占设备宽度的1/2。我可以(再次)为您调试它,但您不会学到任何东西。你需要检查每一个元素,找出是哪一个导致了你的问题。尝试使用检查器删除元素,直到边距消失。你很快就会发现有问题的元素,然后你就可以检查属性来确定问题。是的,是的,当然你是对的,我只是需要一点推动。解决你自己的问题做得很好。请把你的问题设为“已回答”。