div背景拉伸除了内容

Question

我尝试将页眉和页脚背景设为100％，但页面中的所有内容都是1200px并使页面居中。

到目前为止，我把宽度：1200px放在html中，正文确保页面居中，但它固定宽度是我不想发生的背景。

此外，我一直在尝试修复导航，以便定位在右侧并与徽标对齐。

html,body{
    background: #fff;
    width: 1200px;

}


.container{
    min-height: 100%;
    margin: 0 auto;
}

header{
    background: #363636;
    color: #fff;
    padding: 30px;
    margin: 0 auto;
}

.logo{
    float: left;
    clear: both;
    display: block;
}

nav{
    float: right;
}



<div class="container">
        <header clas="main_header">
            <div class="logo">
                <h2>LOGO.COM</h2>
            </div>
            <div class="clearfix"></div>
            <nav class="main_nav">
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Services</li>
                    <li>Testimonials</li>
                    <li>Contact Us</li>
                    <li>Get a Quote</li>
                </ul>
            </nav>
            </header>
.....

</div>

Answer 1

不要限制HTML的宽度或body ...限制容器的宽度。

html,body{
    background: #fff;
}


.container{
    width: 1200px;
    margin: 0 auto;
}

如果元素需要更宽而不是容器，只需关闭一个.container添加更宽的元素并打开一个新的.container。

Codepen Demo