Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Customizing Colors and Fonts Use Color in CSS

Ottavia Milani
Ottavia Milani
5,193 Points

My green header bar doesn't cover the entire width of the browser window but just a bit over the width of the imgs.

I have used the exact same CSS code that he uses in the video so I don't get why my green header bar doesn't take up the entire width of my browser bar.

Paul Sullivan
Paul Sullivan
7,876 Points

Post the code and we can help ya out. :)

Ottavia Milani
Ottavia Milani
5,193 Points

wrapper {

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

you want the nav bar to expand all the way across right? so that 100% and you set the wrapper to 940px so that the content on the page i guess .

4 Answers

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; }

Ottavia Milani
Ottavia Milani
5,193 Points

how can I avoid using the display block? thx

You can set display to inline or inline-block in CSS file

display: inline-block;

OR

display: inline;

Hope it helps

Ottavia Milani
Ottavia Milani
5,193 Points

Ok... so It seems I've done everything correctly and exactly what the guy on the video tells me to do. most of the issues are connected to the use of the id="...." and the relative #.....

For example the

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

and its relative

#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%
}

The same happens when I add

<section id="primary"> </section>"

and

<section id="secondary"> </section>

to the responsive.css file in order to make two sections go next to each other rather than under one another.

The same issue happens more than once, as if the css doesn't get linked to the html file. Weirdly enough other styling changes work just fine!

Help!

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?

Ottavia Milani
Ottavia Milani
5,193 Points

in the original code it's correct...