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

HTML-CSS
1

Tell us what’s happening:

im not sure where I’m going wrong. step 2 and 3 keep failing the test.

Your code so far

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

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


<body>
    <main id="main">
      <h1 class="todo-list">To Do List</h1> 
    
        <ul>
        <label for="onions" id="list-item" class="list-item"><input id="onions" type="checkbox">Grocery Shopping</label>
            
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.apple.com" target="_blank">Onions</a></li>
            </ul>


     <label for="oil-change" id="list-item"><input id="oil-change" type="checkbox">Car</label>
            <ul class="sub-item">
                <li>
                <a class="sub-item-link" href="https://www.apple.com" target="_blank">Oil Change</a>
                </li>
            </ul>
            


     <label for="hair-cut" class="list-item"><input id="hair-cut" type="checkbox">Grooming</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.apple.com" target="_blank">Hair Cut</a></li>
            </ul>



     <label for="vaccum" class="list-item"><input id="vaccum" type="checkbox">House Cleaning</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.apple.com" target="_blank">Vaccum</a></li>
            </ul>
    </ul>
</main>


</body>

</html>

/* file: styles.css */
.sub-item {
  text-align: left;
list-style: circle;
}
h1 {
  text-align: center;
}
.list-item {
  text-align: center;
}
.todo-list {
  list-style-type: none;
}
a {
  text-decoration: none;
}
.sub-item-link {
  color: orange;
}
a:link {
color: brown;
}
.sub-item-link:active {
  color: orange;
}
.sub-item-link:hover {
  color: pink;
}
.sub-item-link:visited {
  color: magenta;
  text-decoration: underline;
}
.sub-item-link:focus {
 outline: purple
}
#main {
  background-color: olive;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Safari/605.1.15

Challenge Information:

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

2

Hi @Coder59

  1. You should have an unordered list with the class todo-list. ✗
    The class element is in the wrong element.
  2. Inside the unordered list, you should have four list items. ✗
    You have four ul elements with one li element each.

Happy coding