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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Why my dots still remain?

Why my dots still remain? Could you pls have a look at the code?

wrapper {

margin: 0 auto; padding: 0 5%; }

logo {

text-align: center; margin:0; }

a { color: white; text-decoration:none; }

img { max-width: 100%; }

header { background: green; border-color: blue; }

h1, h2 { color: black; }

nav { background: orange; }

nav a, nav a:visited { color: yellow; }

nav a.current, nav a:hover { color: red }

gallery {

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

gallery li {

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

body { background-color:#fff; color: #999; }

3 Answers

Paul Cox
Paul Cox
12,671 Points

Can't tell if this is a formatting issue but are you missing the id selector on your gallery selectors?

#gallery {
}

#gallery li {
}

Another thing to check is that your styles are actually being loaded and applied. Open the developer tools and check the network tab to ensure you css file is being included (should have a status of 200).

If your stylesheet is included right click the gallery element and select Inspect. In the styles tab you should be able to see the styles that are being applied to the element and what stylesheet they are coming from.

You also appear to be missing a semi-colon at the end of the style declaration although this could be a formatting issue again.

nav a.current, nav a:hover { color: red }

I'd encourage you to get into the habit of following a css style guide (e.g. https://github.com/airbnb/css) as this will definitely help in your career.

Nope. I have the selectors. All good

Paul Cox
Paul Cox
12,671 Points

Can you edit your OP to format the code correctly? Click on the Markdown Cheatsheet link below to see how to format css.

#wrapper {
  margin: 0 auto;
  padding: 0 5%;
}


#logo {
  text-align: center;
  margin:0;
}

a {
  color: white;
  text-decoration:none;
}

img {
  max-width: 100%;
}


header {
  background: green;
  border-color: blue;
}

h1, h2 {
  color: black;
}

nav {
  background: orange;
}

nav a, nav a:visited {
  color: yellow;
}

nav a.current, nav a:hover {
  color: red
}

footer {
  font-size:0.75em;
  text-align:center;

}


#gallery {
  margin:0;
  padding:0;
  list-style:none;
}

#gallery li {
  float:left;
  width: 45%;
  margin: 2.5%;
  background-color:#f5f5f5;
  color: blue;
}

body {
  background-color:yellow;
  color: #999;
}

#gallery li a p {
  margin: 0;
  padding:5%;
  font-size:0.75em;
  color: blue;
}
Paul Cox
Paul Cox
12,671 Points

This css looks fine to me. I'm assuming by dots you mean the bullet points on the #gallery unordered list element. I would check that your stylesheet is being loaded and that the styles are being applied by using the developer tools as I suggest in my amended answer.

My bad Paul. I mistakenly granted the name #gallery not to the proper ul list. I did it for nav ul list of the menu. I hope this is because I am a newbie