make a header full screen (width) css

Question

I am trying to extend my header to cover the full page. http://dev.webgrowth.biz/ and I want it look like this one http://www.webgrowth.biz/ I have been trying everything for hours now. any help would be highly appreciated.

Answer 1

Live Demo

You can achieve the effect using a container element, then just set the containing elements margin to 0 auto and it will be centered.

Markup

<div id="header">
    <div id="headerContent">
        Header text
    </div>
</div>

CSS

#header{
    width:100%; 
    background: url(yourimage);
}
#headerContent{
    margin: 0 auto; width: 960px;
}

Answer 2

#header {
margin: 0;
padding: 0;
width: 100%;
background: xxxx;
}

#header #content {
margin: 0px auto;
width: 800px; /* or whatever */
}

<div id="header">
<div id="content">
stuff here
</div>
</div>

Answer 3

Just set the header width to be 100vw to make it full screen width and set the header height to be 100vh to make it full screen height