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


Nikki Turrisi
Nikki Turrisi
15,095 Points

So my navigation bar is messed up, doesn't reflect css at all, esp. margin/padding/text color

I don't know why this is the only element that is not picking up my css. It is uneven on the page, even though it is in inline-block display. The color is off as well as the centering and I cannot seem to find what I did wrong. I looked at his css compared to mine, and its identical. Could I have missed something in the html?

3 Answers

Robert Komaromi
Robert Komaromi
11,927 Points

Can you post your code, or give a link to Plunker / CodePen / JSFiddle? Your problem may arise for any number of reasons...

  • Class name in HTML and CSS don't match (check for any typos)
  • You missed a dot in your CSS for the class name (check for any syntax errors)
  • Your CSS properties are unexpectedly being overwritten (check the order of your CSS and the specificity of your CSS selectors)

You can run your HTML through the HTML validator and your CSS through the CSS validator or through CSS Lint to help you find problems.

Nikki Turrisi
Nikki Turrisi
15,095 Points

Hey, thanks so much for the advice! I added my code and they found about 1,000 mistakes! So... being a newbie I kind of just need help with this specific problem, so I don't become overwhelmed. But thank you so very much for the links you provided, I am sure they will be invaluable resources in the future!


Robert Komaromi
Robert Komaromi
11,927 Points

You're welcome!

1000s of mistakes!? Do you even have 1000 lines of code? Even though you're just starting off, it may be a good way for you to learn CSS and write it the right way. Warnings are ok to ignore, but definitely look at any errors.

3,523 Points

It could rendering this way for a variety of reasons, such as incorrectly nested elements, declarations overriding each other or with the same name, or even browser issues. Can you give us a link or show some code you're using?

Robert Komaromi
Robert Komaromi
11,927 Points

Nikki, we can't actually view your workspace - following the link you posted gives us a 404 error. It's best to post your code here, or if there is a lot of code (and maybe more than one file), it's better to post it to Plunker, CodePen or JSFiddle (or another place, if you prefer).

Robert Komaromi
Robert Komaromi
11,927 Points

jonathankavalos makes a good point about browsers. Different browsers use different layout engines. It's a good idea to see what your content looks like in different browsers. I usually just test in recent versions of IE, Firefox, Chrome and Safari - but there are many good tools to help to achieve consistency among different web browsers and devices.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Nikki,

Can you please post the CSS you wrote, or include a screenshot so I can take a look at your code? Thanks! :)

Nikki Turrisi
Nikki Turrisi
15,095 Points

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

body { font-family: 'Open Sans', sans-serif; }


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

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin:0 0 1em 0; }

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

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


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


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

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

/****************************** 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 ******************************/

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

/* green header */ header { background: #6ab47b; border-color: #599a68;

/* nav background on mobile devices */ nav { background: #599a68; }

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

/*links */ a { color: #6ab47b; }

/* navigation links */ nav a, nav a:visited { color: #fff; }

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

Robert Komaromi
Robert Komaromi
11,927 Points

Please format your code using Markdown. There is a link to the Markdown Cheatsheet below the comment box. Wrap your code between




And can you also post your HTML?

Some problems with your CSS:

  • You should prefix wrapper, logo and gallery with a dot (.) or hash/pound symbol (#) to indicate a class name or an ID, respectively

  • Under your NAVIGATION heading, you used a colon instead of a semicolon for nav ul. You currently have nav ul { list-style: none; margin: 0 10px: padding: 0; }. You should have a semicolon after margin: 0 10px, not a colon.

After these changes, you will have valid CSS.