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 Adding Pages to a Website Add and Style Icons

Posted by Jared Schoenbrun
Jared Schoenbrun
2,067 Points

Trying to set the correct font size, remove margin, padding, and list style. I'm not sure what I'm doing wrong

Any Thoughts?

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

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

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

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

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

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

.contact-info ul {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

4 Answers

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

I think you need to select that with the unordered list first, then the class:

ul.contact-info{
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

Steve.

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hi Jared! Everyone seems to be having the same problem with this task. The class contact-info already refers to an ul element, so if you target in your css

.contact-info ul { property: value; }

what you are actually doing is refering to ul elements inside your contact-info ul element, which in this case, they dont exist. So in order to tackle this challenge you just have to change your call to

.contact-info { property: value; }

And you are set to go :)! Keep coding!

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Jared,

Your property declarations are correct, the problem is in your selector. You have it set up to select a ul that is within an element with the class .contact-info, when what you want to select is an ul that has the class of .contact-info.

You have:

/* this looks for an element with a class of .contact-info, and then looks for a ul inside that element. this is not what we want here! */
.contact-info ul {
  /* props here */
}

You want:

/* this looks for a ul with the class .contact-info. this is what you want here! */
ul.contact-info {
  /* props here */
}

Erik

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Jared and Welcome to Treehouse.

The challenges are very specific and very picky. For most challenges, you have to read the questions very carefully. This one says to "select the unordered list with the class contact-info" - It doesn't say the class contact-info and the unordered list.

So, all you need to do is to delete the ul in your last .contact-info selector.

.contact-info {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

Hope that helps. Keep Coding! :)