html и css. Блок не выравнивается правильно. Пробовала по разному, код верный, но в чем проблема я не знаю

html{
  box-sizing: border-box;
}

*, *::before, *::after{
  box-sizing: inherit;
}

.wrapper{
  width: 1320px;
  margin: 0 auto;
}

<header class="header">

        <div class="header__wrapper">
            <div class="wrapper">
                <div class="header__logo">
                    <a class="header__logo-link" href="/">
                        <img src="img/svg/лого.svg" alt="SchoolLibrarySooks" class="header__logo-pic">
                    </a>
                </div>
            </div>

            <naf class="header__naf">
                <ul class="header__list">
                    <li class="header__item">
                    <a href="#!" class="header__link">Классы</a>
                    </li>
                    <li class="header__item">
                    <a href="#!" class="header__link">Предметы</a>
                    </li>
                    <li class="header__item">
                    <a href="#!" class="header__link">Авторы</a>
                    </li>
                    <li class="header__item">
                    <a href="#!" class="header__link">Учебный пособия</a>
                    </li>
                </ul>
            </naf>
        </div>

    </header>