Build a Stylized To-Do List - Failing steps 2 and 14

HTML-CSS
1

Tell us what’s happening:

I keep failing steps 2 (You should have four list items inside the unordered list) and 14 (The links on the page should have no underline by default.)

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

<ul class="todo-list">

    <li>

        <input type="checkbox" id="1"/>
        <label for="1">Test</label>
        <ul class="sub-item">
        <li><a class="sub-item-link" href="https://www.cnn.com" id="1" target="_blank">Cow</a></li>

    

    <li>

        <input type="checkbox" id="2"/>
        <label for="2">Test2</label>
        <ul class="sub-item">
        <li><a class="sub-item-link" href="https://www.cnn.com" id="2" target="_blank">Dog</a></li>

    

    <li>

        <input type="checkbox" id="3"/>
        <label for="3">Test3</label>
        <ul class="sub-item">
        <li><a class="sub-item-link" href="https://www.cnn.com" id="3" target="_blank">Sheep</a></li>

   

    <li>

        <input type="checkbox" id="4"/>
        <label for="4">Test4</label>
        <ul class="sub-item">
        <li><a class="sub-item-link" href="https://www.cnn.com" id="4" target="_blank">Donkey</a></li>

     

</ul>    

</body>

</html>

/* file: styles.css */


a:link {
  color: red;
  text-decoration: none;
}


a:visited {
  color: green;
  text-decoration: none;
}


a:hover {
  color: hotpink;
  text-decoration: none;
}


a:active {
  color: blue;
  text-decoration: none;
}

a:focus {
  outline: 2px solid orange;
  

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

Honestly, I am little confused on what you’re trying to do. I am assuming th test wants one UL with four LI but you have a lot of UL with just one LI inside them, and then you have four random LI with no closing tags. Have you tried having just one UL with just four LI inside?

3

Hey @youorme, just jumping in here as another pair of eyes. I think part of the issue with failing step 2 is that your main <ul class="todo-list"> is missing a closing >—so the browser probably isn’t rendering the list correctly. Also, as Cody_Biggs pointed out, the structure looks a bit off. Right now, each list item has its own nested <ul>, which is okay if that’s the intent, but for the test to pass, it likely just expects four <li> elements inside one single <ul> without extra nesting.

As for step 14, the CSS has some missing closing braces. Each a: selector like a: link, a: visited, etc., should end with a closing }. That might be causing the browser to skip the text-decoration: none rule, making the underline still appear.