css - 内容在浏览器全屏时向右移动 (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;
}