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 Pick Fonts and Set Relative Units

Posted by Lindsey Davis
Lindsey Davis
2,301 Points

Green Header

I rearranged everything, just like in the video. Now the header isn't green, it's white. I keep reviewing my code but can't seem to figure out why it's not green anymore. Has this happened to anyone else?

2 Answers

Jovanny Elias
Jovanny Elias
16,204 Points
Jovanny Elias
Jovanny Elias
16,204 Points

Hello can you post your code so that we may see what the problem might be. Below is a quick guide on how to type out code on here. With out your code we can't really tell you why it's not green.

Code block on Treehouse

Lindsey Davis
Lindsey Davis
2,301 Points

Yes, here is my code:

/***************** GENERAL *****************/

wrapper {

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

a { text-decoration:none }

/***************** HEADING *****************/

logo {

text-align:center; margin:0; }

logo {

text-family: 'open sans', sans-serif;

    /*green header*/

header { background:#6ab47b; border-color: #599a68; }

/***************** COLORS *****************/

/site body/ body { background-color: #fff; color: #999; } /nav background on mobile/ nav { background:#599a68; }

/logo text/ h1, h2 { color: #fff; } /links/

a { color: #6ab47b; } /nav links/ nav a, nav a:visited { color: #fff; } /selected nav link/ nav a.selected, nav a:hover { color: #32673f; }

Blake Hutchinson
Blake Hutchinson
21,695 Points
Blake Hutchinson
Blake Hutchinson
21,695 Points

Not sure what's happening without looking at the code. However, placing !important at the end of the code right before the last semicolon will make sure nothing else can change it.

header {
  color: green !important;
}

If you have the link colors specified elsewhere in the CSS file and you're wanting the links in the header tag to be green, then you could write the code like this.

header a {
  color: green;
}
Lindsey Davis
Lindsey Davis
2,301 Points

I added !important to the CSS code and it still didn't turn the header green. So weird!