内容在浏览器全屏显示时向右移动（CSS）

Question

我正在使用CountryGardensNursery.co，一切都在Firefox中显示得很好。当我全屏交叉检查Safari和Chrome时，页面上的内容会移到页面右侧而不是中心。

我将内容放在两个容器中：

<div class="main_container"><div class="page_container"></div></div>

与代码相关的CSS是：

.main_container {
    width: 1000px;
    background: transparent;
    margin: 0 auto -30px;
    top: -30px;
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 90;
}

.page_container {
    background: transparent;
    width: 700px;
    position: relative;
    float: left;
    padding: 0px 20px 10px 0px;
    min-height: 500px;
}

我正在使用Wordpress对此网站进行编码。是否存在一行代码或者是否有人发现任何冲突？任何帮助都会很棒！感谢。

有冲突的网页：www.countrygardensnursery.co/about/

Answer 1

您的<header>未包含溢出。使用以下解决方案之一：

<强>溢出

header { /* style.css:1481 */
    overflow: hidden;
}

Clearfix - 推荐

header:after { /* style.css:1481 */
    content: '';
    clear: both;
    display: block;
}