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

HTML-CSS
1

Tell us what’s happening:

Edit: solved both steps now and passed the lab. But would still like to know why both a bulletpoint and a checkbox are being displayed.

I’m failing steps 9 & 10 and can’t see why.

Also, each list item is displaying both a bullet AND a checkbox, and I would like guidance on how to remove the bullet (I have googled!)

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>
    <h1>To do list </h1>

    <ul class="todo-list">

        <li> 
            <input type="checkbox" id="first-item">
            <label for="first-item">First item</label>
        </li>
        <ul class="sub-item">
            <li>
            <a class="sub-item-link" href="www.google.com" target="_blank">This is the first item</a>
            </li>

        </ul>
        <li> <input type="checkbox" id="second-item">
        <label for="second-item">Second item</label>
        </li>

        <ul class="sub-item">
        <li>
        <a class="sub-item-link" href="www.google.com" target="_blank">This is the second item</a>
        </li>
        </ul>
        
        <li> <input type="checkbox" id="third-item">
        <label for="third-item">Third item</label>

        <ul class="sub-item">
        <li>
        <a class="sub-item-link" href="www.google.com" target="_blank">This is the third item</a>
        </li>
        </ul>

        <li> <input type="checkbox" id="fourth-item">
        <label for="fourth-item">Fourth item</label>
        </li>

        <ul class="sub-item">
        <li>
        <a class="sub-item-link" href="www.google.com" target="_blank">This is the fourth item</a>
        </li>
        </ul>
        
    </ul>
</body>

</html>

/* file: styles.css */
.todo-list {
  font-family: sans-serif;
}

h1 {
  font-family: sans-serif;
  color: pink;
}

a {
  text-decoration: none;
}

a:hover {
  color: orange;
}

a:active {
  color: pink;
}

a:focus {
  outline: solid;
}

a:visited {
  color: green;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

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

2

that’s what you wrote, the list item has the bullet and the input element has the checkbox, you need to change the styling of the li to remove the bullet

3

Thanks - I’ve already submitted and am not sure how to access the code again to make this change.