响应问题。网站仍然很大，而元素可以扩展

Question

我目前正在致力于使网站具有响应能力。但是我遇到了一个我似乎无法弄清楚的问题。

因此，当您在移动设备上访问该网站时 phone 或者您只是缩放浏览器时，大部分（尚未完成）会正确缩放。你可以看到主页上的元素确实都具有相同的宽度。因为我使用了宽度 100% CSS 属性。

但是，它仍然可以横向滚动，有一个很大的背景东西挡住了路，我不知道是什么，我的元素检查器似乎甚至没有把它当作一个元素来捕捉，或者任何。我一直在搜索它是什么，我认为它可能是 jQuery 的东西，但实际上 none 我尝试过的任何东西似乎都有效。我也尝试了不同的视口，但这似乎也不起作用..

有人知道这里发生了什么吗？提前致谢。

更新：

感谢大家的帮助！ #access ID。仍然有 970px 的宽度。我将其设置为 100%，现在已修复！

Answer 1

您首先需要在 <head> 区域指定视口。这样才能使响应正常生效。

<meta name="viewport" content="width=device-width, initial-scale=1">

在此处阅读有关视口的更多信息：MDN

除此之外，您似乎还需要将一些元素添加到响应式 CSS 中，因为它们已在 style.css 文件中设置了宽度。

@media screen and (max-width: 800px) {
    #access {
        width: 100%;
    }
    #footer-sidebar { 
        padding: 5%;
    }
}

Answer 2

从此伪 class 选择器中删除点

.widget:after, #menu-footermenu:after, .clearfix:after {
  content: "";
}

Answer 3

尝试删除 style.css 上的宽度 #access{}

编辑：#access { /* width: 970px; */ margin: 9px auto 0; position: relative; z-index: 500; }

Responsive issue. Websites remains big while elements scale