Why won't padding apply to slotted(a)

In the html I added in the slot 3 s but the padding won't apply, i tried to look for different things that would cancel the padding but i couldn't find it

The code for the web component is: import {LitElement, html, css} from 'lit' import {classMap} from 'lit/directives/class-map.js'

class NavBar extends LitElement{
    constructor () {
        super();
    };
    
    static get styles(){
        return css
        `header {
            margin-top: 40px; 
            display: flex;
            height: 40px;
            background-color: var(--grey-color);
            width: 100%;
          }

          header div.logo {
            display:flex;
            margin-top: 7px;
            align-items: center;
            padding: 0 1rem;
          }

          div.navb{
            margin-left: 10vw;
            display: flex;
            align-items: center;
            width: 30%;
          }

          nav{
            display:inline-block;
            align-items: center;
            height: 40px;
            width: 30%;
          }

          header nav {
            flex-direction: column;
            position: absolute;
          } 
          
          div.navb{
            display:inline-block;
            align-items: center;
          }

          ::slotted(a) {
            padding-top: 11px; !important;
            font-family: "Gilroy";
            color:#F3F3F3;
          } 

          .navli::slotted(a:hover) {
            background-color: var(--purple-color);
            color: white; !important;
          }

          .logo::slotted(a) {
            margin-top: 10px;
            padding-left: 5%;
            padding-right: 8%;
          }

          .animate {
            transition: all 1s ease-in-out !important;
          }

          ::slotted(.nav-link--active) {
            color: var(--navbar-link-active-color) !important;
          }`
    }

    render() {
        return html
            `<header>
                <div class="logo">
                    <slot name="brand" class="logo"></slot>
                </div>
                <div class="navb">
                    <nav>
                        <slot name="nav-links" class="navli"></slot>
                    </nav>
                </div>
                <div>
                    <slot name="user"></slot>
                </div>
            </header>`;}

and this is the html

 <nav-bar active="home" breakpoint="576">
        <a slot="brand" href="#" width="20" height="20">
            <img src="images/logo.svg" alt="logo">
        </a>
        <a slot="nav-links" href="#">HOME</a>
        <a slot="nav-links" href="#">FITTING ROOM</a>
        <a slot="nav-links" href="#">SUGGESTIONS</a>
   </nav-bar>