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 CSS Foundations Text, Fonts, and Lists List Styles

Posted by layeesolo
layeesolo
7,316 Points

Add a bottom margin of 20px to the list itmes

What am I doing wrong? I tried this , but is not working.

li{margin-bottom:20px;}

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Lists</title>
    <link rel="stylesheet" href="page.css" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <ul>
        <li>Viverra rutrum orci lacinia iaculis mi per fermentum tortor malesuada, nullam morbi fringilla augue arcu primis torquent</li>
        <li>Id aliquam nisi accumsan felis pretium enim arcu fames</li>
        <li>Eros mollis sociosqu condimentum lectus cursus pellentesque et laoreet</li>
        <li>Duis nullam accumsan conubia auctor aliquam posuere nam tortor mollis a</li>
    </ul>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

ul{list-style:none;}
li{list-style:url("../img/marker.png")
  li {margin-bottom:20px;}
Ben Lockett
Ben Lockett
22,419 Points
Ben Lockett
Ben Lockett
22,419 Points

Hi Abraham,

From the code shown it looks like you are trying to nest your Css or not closing out your {}.

li {

list-style:url("../img/marker.png"); margin-bottom:20px;

}

Try this. Hope it helps.

Ben Lockett
Ben Lockett
22,419 Points
Ben Lockett
Ben Lockett
22,419 Points

Hi Abraham,

From the code shown it looks like you are trying to nest your Css or not closing out your {}.

li {

list-style:url("../img/marker.png"); margin-bottom:20px;

}

Try this. Hope it helps.

layeesolo
layeesolo
7,316 Points

Thanks. I understand it now:D

2 Answers

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points
Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Hi,

You need to put a semi-colon after

`` li{list-style:url("../img/marker.png")

`` li{list-style:url("../img/marker.png");

``

Hope that helps,

Jane

Chris Wiley
Chris Wiley
11,327 Points
Chris Wiley
Chris Wiley
11,327 Points

Looks like you need to add a space after the colons.