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 Styling Web Pages and Navigation Build Navigation with Unordered Lists

Jeremy Dortch
Jeremy Dortch
3,799 Points

Grey Boxes around links in the header....

So everything was running smoothly until this step, and now I have grey boxes surrounding the links in my header that correspond to the #999 color. I've tried changing the only line of code that has this color but it has no effect. Will post the code if it helps answering this question. Thanks!

Jacob Herper
Jacob Herper
94,150 Points

Can you please post your code? It might just be a small error in the css.

Zachary Caldwell
Zachary Caldwell
13,166 Points

Posting the code will help greatly, but check and make sure your selectors have both opening and closing brackets and that you've included a semi-colon after each rule in your selectors. Small errors can happen like this all the time and that's likely the cause.

Jeremy Dortch
Jeremy Dortch
3,799 Points

Thanks for all the help!

/******************* 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%; }

a {color: #6ab47b; }

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

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: 5px 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; } footer {clear: both; }

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

/******************* PAGE : PORTFOLIO *******************/

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

}

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

/site body/

body { background-color: #fff; }

/green header/

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

/heading/

/color on logo texts/

h1, h2 { color: #fff; }

/links/

a {color: #6ab47b; }

/navigation background on mobile devices/

nav { background: #599a68; }

/nav link/

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

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

Zachary Caldwell
Zachary Caldwell
13,166 Points

Two problems that I see:

Padding needs a colon in your wrapper selector.

--> Incorrect: max-width: 940px; margin: 0 auto; padding 0 5%; --> Correct: max-width: 940px; margin: 0 auto; padding: 0 5%;

Everything from "COLORS" down is being ignored because of invalid use of "/" (i am assuming these were meant to be comment blocks) use /*...*/ instead on each of these lines where you commented incorrectly.

--> Incorrect: /site body/

--> Correct: /*site body*/

After fixing those errors I ran the fixed code through w3c css validator and everything seemed peachy. You can use this at http://jigsaw.w3.org/css-validator/#validate_by_input