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

HTML

main.css messed up

Hello companions, :)

My code inside main.css is messed-up.

there should be dark-ish-green background behind my header...

And all i see is white color and no any text included.

Code: /******************** GENERAL ********************/ body { font-family: 'Open Sans', sans-serif; }

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

a { color: #6ab47b; }

/******************** HEADING *******************/ / green header*/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; } /******************** NAVIGATION ********************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display:inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/******************** FOOTER ********************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { widows: 20px; height: 20px; margin: 0 5px; }

/******************** PAGE: ABOUT ********************/

.profile-photo { display:block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 } /******************** PAGE: CONTACT ********************/ .contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/******************** COLORS ********************/ body { background-color: #fff; color: #999; }

h1, h2 { color: #fff; } /* nav background on mobile devices*/ nav { background: #599a68; }

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673f; }

2 Answers

Hi Slobodan,

It looks like the header has yet to be assigned a background-color value. Try altering your current header style code by adding the below to the header {} css:

background-color: #599a68;

Hope this helps!

thanks! this helped :)

Hi Slobodan,

You have your dark green-ish color set on your nav not your header.