html - Wordpress:在响应式 View 中，容器不会占据全宽

Question

我已经阅读这里的提示很长时间了，得到了很多帮助。今天我需要个人帮助...

响应式 View (< 1024 px) 应该是全宽的并且居中有一点填充。填充效果很好，但内容没有填满整个页面，右边有很大的空白。我尝试了此处列出的所有 css 调整。实际的自定义 css 代码是:

@media only screen and (max-width: 1024px){
#boxed, html, body, div.container.main-content
{
width:      100% !important;
margin:     0px;
}
.row
{
margin:     0px !important;
width:      100% !important;
padding:    15px !important;
}
.container, .container-wrap
{
margin:     0px !important;
width:      100% !important;
padding:    0px !important;
}
}

网站是 www.timschuermann.com/dev/

提前感谢您的帮助

蒂姆

更新 1

感谢您的快速回答!我尝试了所有的建议，还是不行。

实际代码是:

@media only screen and (max-width: 1024px){
div.container.main-content
{
width:      100% !important;
margin:     15px auto !important;
}
#boxed, html, body
{
width:      100%;
margin:     0px;
}
.row
{
width:      100%;
margin:     0px;
padding:    0px;
}
.container, .container-wrap
{
margin:     0px;
width:      100%;
padding:    0px;
}
}

实际设计正是我“开箱即用”的设计。

我希望内容显示得更大，左右各留出 15px 的边距。

但还有一个新问题:在我的 iPhone 上，内容上方有空白区域，颜色为灰色。重新加载后它消失了吗？

我希望你能理解我的意思并能帮助我。

提前致谢

蒂姆

Answer 1

请避免使用!important。当您以后需要更改样式表时，这会给您带来困难。

要使容器居中，请添加以下内容。

div.container.main-content {
    margin: 0 auto;
    max-width: inherit;
}