Extend DIVs inside a div wrapper - fixed layout

Question

I want to know how can I extend every DIVs inside a div wrapper. My div wrapper is fixed and has a width of 980px.

My HTML goes here:

    <div id="wrapper" >

        <div id="header" >
            <strong>HEADER</strong>
        </div>

        <nav>
            <strong>Navigation</strong>
        </nav>

        <div id="content" >
            <div class="sidebar" >
                <p>sidebar</p>
            </div>
            <div class="main-content" >
                <p>content goes here.....</p>
            </div>
        </div>

        <footer>
            <strong>copyright etc....</strong>
        </footer>

    </div>

Here's the FIDDLE

What I want to achieve is every DIVs which hasbackground-color will expand and max-out the width of wrapper or something like filling the width of body to the fullest. But the content or texts must still has the width of 980px and is fixed. Thanks in advance.

Answer 1

Check this Demo

.div-inner {
width: 500px;
margin: 0 auto;
}