Select the anchor elements inside the contact-info list. Then set them to block level elements.

This is the correct answer:

.contact-info a { display: block; }

I was getting confuse with the word list so I was adding a li.

To set any element to block level use this: display: block;

The correct answer would be.

ul.contact-info a { display: block; }

I'd try something like this if there is no class and you only want the anchor in the list

ul a { code; }

If the class is your list...

<ul class="contact-info"> <a></a>

then I'd try something like

.contact-info a { code; }

Let me know if this helps.

Thanks to all you for your great help!!!

I'm getting this message: Did you set the display for links inside of the contact-info list to block?

Not sure why?

This is the code I wrote

li.contact-info a { display: block; }

Select the anchor elements inside the contact-info list. Then set them to block level elements.

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

/****** When I input this one below it says its wrong.*****/ /********************************************************************/

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

ul.contact-info a { display: block; }

.contact-info a{ display: block; }

/This is the only way it worked for me/

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

ul.contact-info a { display: block; }

Originally I had interpreted the question with an instinctive thought of "easy enough, list means li". So thinking such I created:

li.contact-info a {
   display: block;
}

The reason this does not work and where I believe the confusion comes from is because the anchor element being targeted is inside of the ul element with the class of "contact-info". At this point we are applying a style to ALL anchor elements in our unordered list. We then will further style our list by attaching new rules to each li element.

With this in mind the correct answer becomes:

ul.contact-info a {
   display: block;
}

Disclaimer: My post could be very obvious but I find it great reinforcement to try to explain things I have found confusing to gain further clarity. If any of this is incorrect please let me know!

.contact-info li a { display: block; }

I have tried all the solutions on this page and others in the forum and none worked, but this does: .contact-info, .contact-info li a { font-size: 0.9em; margin: 0; padding: 0; list-style: none; display: block; }

.contact-info a { display: block;

Had the same problem. Very confused with the language of the "Code Challenge: 2/5". Solved with all these answers, thank you.

.contact-info a { display: block; } is the correct answer

Sergio,

Here is a simple example using the CSS that you have used in your forum post.

li.contact-info a {
   display: block;
}