居中响应标头-Wordpress博客

Question

我已经尝试了几种方法，但似乎无法完成每一步。 我为某人创建了一个wordpress博客，她对此很满意，但最近希望更改标题。 我把它放宽了，她想把它装箱/居中。 标题基本上包含徽标，导航和左边要放置在其中的两幅图像，客户希望在其中放置外观。 博客是响应式的，一旦屏幕到达特定点，标题就会与页面其余部分的容器匹配。 但是在全屏笔记本电脑/台式机上，它的起点仍然要宽得多，而两侧只有一点填充。 当我将其填充到正确的宽度时，屏幕变化时它会变小。 我希望它始终与主滑块和容器的宽度相同。

该博客位于http://www.allloveblog.com

我现在的头的CSS：

.fusion-header{
position:relative;
display:block;
/*width:100%;*/
/*padding-left:162px;
padding-right:160px;*/
padding-top:0px;
padding-bottom:0px;
}

.fusion-header-wrapper{
position:relative;
display:block;
width:100%;
float:center;

}

如果您更改浏览器窗口，则可以看到更改发生的位置，一旦更改为其他容器的宽度，它将立即变为粘滞状态，我只需要从容器的宽度开始即可。

任何帮助深表感谢。

Answer 1

我认为您要做的就是：

.fusion-header-wrapper {
    max-width: 1160px;
    margin: 0 auto;
}

如果您需要覆盖一些CSS规则，只需在类之前添加body 。 这样，您的规则将获得优先级，并且可以轻松识别您的规则。 像这样：

body .fusion-header-wrapper {
    max-width: 1160px;
    margin: 0 auto;
}

说明
基本上，您需要为标头设置宽度限制，以匹配主机的宽度限制max-width: 1160px; 显然将标题居中与margin: 0 auto;

#main左右两侧填充为30px。
在#main内部，我们有.fusion-row ， max-width: 1100px;
在.fusion-header-wrapper内部，我们有.fusion-header ，左右两侧填充了30px。
因此，如果您设置max-width: 1100px; 您会注意到由于其他div上的填充，您需要再增加60像素。

PS确保创建用于编辑现有WP主题的子主题。