div background stretch except the content

Question

I'm trying to make the header and footer background to be 100% but all the content in the page to be 1200px and centre the page.

So far I put width:1200px in the html, body sure that centre the page but it fixed width the background which I don't want to happen.

Also I've been trying to fix the navigation as well to be positioned on the right and align to the logo.

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

Don't restrict the width of the HTML or body...restrict the width of the container.

html,body{
    background: #fff;
}


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

If an element needs to be wider than the container just close one .container add your wider element and open a new .container.

Codepen Demo