响应填充麻烦

Question

我为教程设计了一个响应式网页，我遇到了不必要的填充问题。

http://zinzinzibidi.com/res

在此页面中，当您降低浏览器窗口分辨率时，您将在某些分辨率中看到水平滚动条（overflow-x）。我想了解，但我几天都无法解决这个问题。

以下是我遇到麻烦的示例图片：

我的CSS代码在这里：http://zinzinzibidi.com/Areas/res/Content/css/style.css

我的媒体屏幕代码是

我做错了什么？

Answer 1

看来内部项目导致了问题。从＃header-main-buffer中删除填充，它应该消失。

你文件的第515行：

#header-main-buffer {
    width: 300px;
    padding: 0 10px; <- this is your problem. remove it and it will be fixed
    ...

Answer 2

我检查了您的代码，可能是您创建额外填充的<div id="header-logo">。

由于img在小于山雀的屏幕上具有300px的固定宽度，因此会在右侧创建额外的填充，以使其适合屏幕。

尝试减少

@media screen and (max-width: 479px) and (min-width: 320px) {
 #header-container {
  width:;
 }
}

修改

---

基本上检查您正在使用的所有img，以确保它们的宽度合适且适合屏幕。