Build a Stylized To-Do List - Stylize selectors

HTML-CSS
1

Tell us what’s happening:

Hello, Hello

This is my first post. Kinda excited for to be cranking through fCC. Much thanks to all those who help developed this !!!

Okay, my problem.
To give context I work on my projects in vscode then copy an paste into the fCC editor for the check marks completion piece.

I apparently am not correctly labeling the active, focus, hover, and visited selectors in my css code., BUT in vscode all four seem to be working well. Am I just overlooking something simple ??

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="stylesheet.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="main">
        <p id="title"> <b>The Game Plan</b> </p>
        <ul class="todo-list">
            <li>
                <input type="checkbox" id="step1">
                <label for="step1">Complete freeCodeCamp</label>
                <ul class="sub-item">
                    <li>
                        <a class="sub-item-link" href="hhtps://www.google.com/fCC" target="_blank">free Code Camp Webiste Full-Stack Program</a>
                    </li>
                </ul>
            <li>
                <input type="checkbox" id="step2">
                <label for="step2">Design your own Portfolio Site</label>
                <ul class="sub-item">
                    <li>
                        <a class="sub-item-link" href="hhtps://www.google.com/meWeb" target="_blank">My personal Website</a>
                    </li>
                </ul>
            </li>

            <li>
                <input type="checkbox" id="step3">
                <label for="step3">Design a Mock Website, something not you</label>
                <ul class="sub-item">
                    <li>
                        <a class="sub-item-link" href="hhtps://www.google.com/somethingelse" target="_blank">The other One</a>
                    </li>
                </ul>
            </li>

            <li>
                <input type="checkbox" id="step4">
                <label for="step4">Prep for the Resume & Job Search></label>
                <ul class="sub-item">
                    <li>
                        <a href="hhtps://www.google.com/jobSearch.com" target="_blank" class="sub-item-link">Looking for another Job any the program</a>
                    </li>
                </ul>
            </li>

        <ul/>
    </div>
</body>

</html>

/* file: styles.css */
todo-list {
  list-style-type: square;
}


#main    {
    background-color: mintcream;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    border: solid 4px mintcream;
    border-radius: 8px;

}

#title  {
    text-align: center;
    font-size: x-large;
}

a {
  color: rgb(62, 150, 153);
  text-decoration: none;
}

.sub-item-link:hover {
    color:rgb(12, 41, 206)
}

.sub-item-link:focus  {
    color:rgb(235, 163, 69)
}

.sub-item-link:visited  {
    color: brown;
}

.sub-item-link:active{
    color: yellow
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0

Challenge Information:

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

2

href="hhtps://www.google.com/jobSearch.com"

Look carefully. Is this a valid href value?

When your links are focused, there should be a colored outline around the link.

Have you satisfied this user story?

Does your href value point to your stylesheet file?

3

oh wow, it was a naming error.

Thank you very much for the assistance. Much appreciated