list-style: none; must be on the ul not the a tag

Output:

I am an absolute beginner and while creating my basic navigation bar I
am facing the issue. I want to eradicate the red circled dots
associated with my list items. Please tell me where I am doing wrong.
My previous question was marked duplicated and this reference was
provided :
I need an unordered list without any bullets
This is my old question: Removal of bullets(dots) attached with items in the navigation bar

The solution states that list-style-type: none; will resolve the
issue and I also applied this solution to my code and nothing changed.

CSS CODE:

   *{padding: 0; margin: 0; box-sizing: border-box;}

    #Header
    {
        background-color: #ffad66;
        font-family: 'Reem Kufi', sans-serif;
        font-weight: 900;
        font-size: 50px;
        color: #800000;
        text-align: center;
        height: 120px;
        box-sizing: border-box;
        padding: 22px;

        /* this line was not in my code from the previous question which was marked duplicated and*/
        list-style-type: none;

   }

    .NavItems a 
    {
        text-decoration: none;
        list-style: none;
        font-size: 14px;
        font-weight: bold;
        font-family: 'Times New Roman', Times, serif;
        color:green;
        margin: 10px; 
        padding: 10px;
    }
    .NavItems a:hover
    {
        background-color: #33E3FF;
        color: black;
    }

    .NavBarItem
    {

     display: flex;
     justify-content: center;

    }
    .MyNavBar
    {
        width: 100%;
        background-color: lightblue;
        height: 35px;
        box-sizing: border-box;
        padding: 8px;      
    }

HTML CODE:
this is the only piece of code under the body tag.

<header id="Header">
    پوشاک
</header>
<nav class="MyNavBar">
    <ul class="NavBarItem">
        <li class="NavItems"><a href="#Men">Men</a></li>
        <li class="NavItems"><a href="#Women">Women</a></li>
        <li class="NavItems"><a href="#Kids">Kids</a></li>

    </ul>
</nav>