Why do the links in my table on contents not take me to the headings?

I put in a code to have a table of contents on my graphics page on my neocities website. I'm not sure what I did wrong because I followed the code exactly and yet the table of contents doesn't work at all. They just turn purple and that's it.

Since the code to my page pushes me over the character limit: Here is a pastebin of my code and Here is a link to the page in question.

And here is the code I'm using since I need to add this here because I linked to pastebin (for some reason.)

 <div id="toc_container">
        <p class="toc_title">Contents</p>
        <ul class="toc_list">
          <li><a href="#First_Point_Header">Pride Flags</a>
          <li><a href="#Second_Point_Header">Blinkies</a>
            <ul>
              <li><a href="#Second_Sub_Point_1">Splatbands</a></li>
              <li><a href="#Second_Sub_Point_2">Other Blinkies</a></li>
            </ul>
          </li>
          <li><a href="#Third_Point_Header">Stamps</a></li>
          <ul>
            <li><a href="#Third_Sub_Point_1">Game Consoles</a></li>
            <li><a href="#Third_Sub_Point_2">Magical Girls</a></li>
            <li><a href="#Third_Sub_Point_3">Memes</a></li>
            <li><a href="#Third_Sub_Point_4">TV Shows</a></li>
            <li><a href="#Third_Sub_Point_5">Video Games</a></li>
            <li><a href="#Third_Sub_Point_6">Cursed Images</a></li>
            <li><a href="#Third_Sub_Point_7">Retro</a></li>
            <li><a href="#Third_Sub_Point_8">Misc</a></li>
          </ul>
          <li><a href="#Fourth_Point_Header">Blinkie Icons</a></li>
          <ul>
            <li><a href="#Fourth_Sub_Point_1">Splatoon Icons</a></li>
            <li><a href="#Fourth_Sub_Point_3">Spooky Month Icons</a></li>
            <li><a href="#Fourth_Sub_Point_4">Homestar Runner Icons</a></li>
            <li><a href="#Fourth_Sub_Point_5">Cuphead Icons</a></li>
          </ul>
          <li><a href="#Fifth_Point_Header">Stickers</a></li>
          <ul>
            <li><a href="#Fifth_Sub_Point_1">Splatoon Stickers</a></li>
            <li><a href="#Fifth_Sub_Point_2">My Little Pony Stickers</a></li>
          </ul>
          <li><a href="#Sixth_Point_Header">Dividers</a></li>
          <li><a href="#Seventh_Point_Header">Misc Little Things</a></li>
          <li><a href="#Eighth_Point_Header">MIDIs</a></li>
        </ul>
      </div>
    </div>

Solution

I opened your website, changed a few things.

Turns out your actual contents have ID stored as "#First_Point_Header". You do not need the # in your actual id. the # is only used when you write the ID in href, to let href know that's what coming afterwards is to be treated as an ID and not a route/URL.

Make the changes to all your content IDs. They'll work then.

So this

<h2 id="#First_Point_Header">Pride Flags</h2>

will change to this

<h2 id="First_Point_Header">Pride Flags</h2>