It is because you may have bigger width than 940px and you use margin property. Margin property sets the wrapper in center of your browser. Meaning in case you have browser screen width 1200px.

You set your wrapper width as 940px. Mostly browser lay out your wrapper from left to right. Now browser will move 130px right to place your starting corner of your webpage.

Padding will create inner space for elements inside wrapper.

Finally wrapper is not an HTML element. So if you want to use in CSS file. Read Below!

There is no HTML element called wrapper. If wrapper is a class you should use .(dot) in front of wrapper in CSS file to select wrapper section. Check the code snippet below.

.wrapper{

}

if wrapper is an ID, you should use # in front of wrapper in CSS file to select wrapper section. Check the code snippet below.

#wrapper{


}

I hope it helps.

Regards

Karthikeyan Palaniswamy

It does not take the entire width of my browser screen as well. It is because my browser screen width is larger than 940px.

Check to the code snippet to make your green header to fill your browser screen

#wrapper{

 /* max-width: 940px; */
    /* margin: 0 auto; */
    padding: 0 5%;

}

I commented out the max-width and margin property. max-width property sets the width for your browser window or for any browser implicitly.

margin property center the wrapper id horizontally.

Don't use display block that takes the size down and try this at the top of your css

*{ Margin: 0; padding: 0; }

In your first <div> tag there is spelling error at the closing <div>. Please check your closing </div> tag. You have missed 'v' for </div>

<div><div id="wrapper"> </div>

Try again and let me know is that fixed?