My css is not being applied to the ID's or CLASS's

[TommyBfoo]

Tell us what’s happening:
Describe your issue in detail here.

My code is a mess I know but I have gotten this far on the personal portfolio challenge.

When I got to the section with the id=“projects”, any css I write linked to any class or id below that no change happens.

I have looked for colon semi colon issues, any spelling mistakes, i have tried change sections to divs and classes to id’s and a few other things but nothing works.

any help on this would be great

thanks in advance

Your code so far

jOaBQPE

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

freeCodeCamp.org

[kevinSmith]

My code is a mess…

Learn to clean and format as you go. And in CodePen, in the upper right corner of each pane are pull down menus where you can have them automatically formatted.

When I got to the section with the id=“projects”, any css I write linked to any class or id below that no change happens.

I just added:

#projects {
  background-color: pink;
}

to your CSS and it changed the background color to pink.

[TommyBfoo]

Cheers for your quick reply and the tip for formatting, iv just tried the same thing and it didn’t change, wonder could it be a browser or cache issue

[kevinSmith]

When I run the “analyze CSS” option, I get this error:

When I fix that, the selector works.

And that is a big reason to format as you go - it is easier to catch mistakes like this. If this had been properly formatted you would have seen this:

@media only screen and (max-width: 800px) {
  header {
    position: absolute;
    top: 0px;
    width: 100%;
  }

#projects {
  background-color: pink;
}

[TommyBfoo]

after you gave me the formatting tip I went in and seen the analyze option. I had just finished analyzing and fixing the issue as you replied.
I know I need to get better at formatting without using that option but your tip will help with the visual aspect.

Thanks again, im back at it

[kevinSmith]

When you get to programming in the “real world”, locally, you can use linters that catch these things easily.