How to Stretch a Header Across a Web Page Background with CSS

How to stretch a header across a web page background with CSS

Analyzing stumbleupon.com:

The "header" consists actually of two divs: wrapperHeader and wrapperNav. Those two have different background colors.
These divs have only one child each that has the CSS property

margin: 0 auto

This results in a horizontal centering.

This property is assigned to the content div too, so the header, navigation and content are always centered. Of course this requires to set some width for this elements.

The structure looks like this:

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

If you get Firebug for Firefox, you can easily analyze the elements yourself.

How can I stretch the header across the whole screen with no white spaces

HTML mark up is invalid, don't wrap you're body content in head tags instead use the, easy named: <body></body> tags to wrap you're page content. Also don't wrap the nav element in another nav tags.

The whitespace you were getting was because of browser default styling applied, you could use a reset stylesheet I recommend Eric Mayer's. Or you could use this handy css statement.

* {
    margin: 0;
    padding: 0;
}

It effectively targets every element on the page and makes their margins and paddings 0.

You should instead use semantic markup for you're HTML.

<!DOCtype html>
<html lang="en">
    <head>
        <title>Adventist Youth's Empowerment</title>
        <link rel="stylesheet" href="mainstyle.css" text="style/css">
    </head>
<body>
<header></header>
    <nav>
        <ul>
            <li><a href="Home.html">Home</a></li>
            <li><a href="Main.html">Main</a></li>
            <li><a href="Aboutus.html">About Us</a></li>
            <li><a href="Contactus.html">Contact US</a></li>
            <li><a href="form.html">Form</a></li>
            <li><a href="Pictures.html">Pictures</a></li>
        </ul>
    </nav>
</body>
</html>

Here I have also created a jsFiddle for the effect you wanted to achive located here: http://jsfiddle.net/5vdgr/

I am Trying to make a header in css stretch full width across the browser

header {
    ...
    width: 100%;
    min-width: 990px;
    position: fixed;
    left: 0;
}

Demo

You're seeing horizontal scrolling because the site loads in a frame. That shouldn't happen in a full browser window.

Header not stretching across screen in CSS

Since your header is absolute positioned you need to add rule for left position and set it to 0. See the updated code below;

/* http://meyerweb.com/eric/tools/css/reset/    v2.0b1 | 201101    NOTE: WORK IN PROGRESS   USE WITH CAUTION AND TEST WITH ABANDON */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}
ins { text-decoration: none;}del { text-decoration: line-through;}
table { border-collapse: collapse; border-spacing: 0;}

/* MY CODE BEGINS BELOW */

.header { display: flex; width: 100%; height: 150px; background-color: black; opacity: 0.8; position: absolute;    left : 0;}
.bg {  display: flex;  display: -webkit-flex;  background: black url(https://images.unsplash.com/photo-1465205568425-23fdd3805e49?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7e476dbc9096ec1c869bd2cb97d82c70) no-repeat center center fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  margin: auto;  padding: auto;  width: 100%;  justify-content: center;}
.headline {  display: flex;  width: 100%;  justify-content: center;  margin: auto;  -ms-box-orient: horizontal;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -moz-flex;  display: -webkit-flex;}
.headline p {  margin-top: 200px;  background-color: transparent;  color: white;  font-family: 'Heebo', sans-serif;  font-size: 50px;  width: 100%;}

<!DOCTYPE html>
<html class="bg" lang="en"><head>  <meta charset="utf-8">
  <title>Hi</title>  <meta name="description" content="Testing">  <meta name="author" content="Nate">
  <link rel="stylesheet" href="style.css">  <link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">
  <!--[if lt IE 9]>    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]--></head>
<body>

<div class="header"> </div>

<div class="headline"> <p>Centered Text</p></div>
 <script src="js/scripts.js"></script></body></html>

how to stretch the header background color across the web browser?

You will need the header wrapper to be inside the body with width 100%, and to specify width=980px both on the header and content below, like this :

CSS

body, html{
    width:100%;
}

div#black_bar{
    background-color: #000000;
    width:100%;
}
div#header {
    height: 66px;
    font-family: arial;
    color: #FFFFFF;
    margin-top: 5px;
    width:980px;
    margin:0 auto;
}

#content{
    font-size: 1.1em;
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;  
    padding-bottom: 25px;
    margin: 0 auto;
    width: 980px;
}

HTML

<body>

<div id="black_bar">
    <div id="header">
    </div>
</div>

<div id="content">
</div>

</body>

Header doesn't go across entire page

Your div#container has a fixed width. Try changing it to 100% like this:

#container { 
    overflow: hidden;
    width: 100%;
    margin: 0 auto 0 auto;
}

http://jsfiddle.net/wmhAd/

Stretching the Top Banner

Try:

* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}

Check the result out in a fiddle.

How to Stretch a Header Across a Web Page Background with CSS