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 Polish the Navigation and Footer

Kyle Enslin
Kyle Enslin
1,421 Points

Sometimes my works works, then it doesn't, then it does after I've deleted it and re-entered it.

This is more a statement just to see if anyone has experienced the same problem. Sometimes I'll enter a rule exactly the same as Nick, save and refresh the website and nothing will happen (the rule won't be executed). I'll try find my mistake by checking over and over and find nothing. So I delete the rule, type it again, save and refresh and all of a sudden it works.

10 Answers

Here is my fork snapshot: https://w.trhou.se/ac2l9alkh2 Click the upper right link (I forget what it says) to open a workspace you can edit.

Kyle Enslin
Kyle Enslin
1,421 Points

Hi Ted,

You were correct. My classes were the issue. Everything is working perfect now.

Thanks so much for taking the time to go through my work and correcting me! I really appreciate it!

Kind regards,

Kyle

Please be sure to vote up answers that you found helpful and mark what you considered to be the best answer with the best answer button.

First error: the class is social-icon in the html and social_icon in the css.

Kyle Enslin
Kyle Enslin
1,421 Points

Thanks. I changed it to social-icon but the images still don't re-size. I even tried to re-size it further by making it 5px by 5px instead of 20px by 20px and still there's no change.

It started sizing it for me. Make sure the classes are exactly the same. Try copy paste.

Your profile photo class in html is Profile-photo. In your css it is profile.photo. Remember that this is case sensitive. They have to match exactly.

I am going through your list and looking at the applied css with the Chrome inspect element feature. That tells me exactly what is going on. If there is no style applied from the css to one element, you have look at the classes. They are not linked up for some reason. Find that reason. If there is a line, there is later styling overriding what you have done.

Kyle Enslin
Kyle Enslin
1,421 Points

I'm not sure what the problem is. I'll add a rule and it will work. Then I'll add another rule and everything messes up (even the previous rule I added). I have no idea why it does that.

Keneque Thomas
Keneque Thomas
4,147 Points

Sometimes the previous rule should remain valid after you added the new one

It is probably because you have an error in your code, but you need to post an example (the entire code) for us to tell you.

Please update your code with proper formatting. Double space between your text and the ```. The language should immediately follow the ``` like this: ```css. The code quote starts on the next line. Close the quote with three more ` on a new line below the code. Open a new quote for every different language.

Also, are you careful to save your changes and update your preview each time?

Kyle Enslin
Kyle Enslin
1,421 Points

After I add a rule I press CTRL+S. I then go to the webpage and click "refresh" and either things go right, but mostly they go wrong. I've posted my code below. My CSS code didn't post as well as my HTML code. Is this OK? My apologies, I'm new to this.

does the code in this snapshot work for you? If not, what is the issue?

Kyle Enslin
Kyle Enslin
1,421 Points

For the most part it works. Here are some of the issues:

  1. White line above the header (this went away then came back after entering more rules)
  2. nav elements not inline or have a font-weight of 800 (these were inline but reverted back after entering more rules.)
  3. The h1 and h2 elements (Name and nav elements) are not properly centered)
  4. .social.icon's not resized to smaller (ie: 20px by 20px)
  5. The profile photo on the "About" page is meant to be round. It's still square.
  6. The profile photo is not centered

I cannot help you troubleshoot intermittent problems unless there is a fork with the problem.