Почему при уменьшение ширины экрана, расстояние между элементами, указано в %, не уменьшается?

.header__container {
    max-width: 1800px;
    margin: 0 auto;
}

.header__menu {
    display: flex;
    padding: 60px 0px;
    align-items: center;
    width: 100%;
}

.header__nav {
    padding-left: 17.8%;
    .nav__item {
        display: flex;
        color: #000;
    }
    .item__column {
        font-size: 13px;
        line-height: (15.85 / 13) * 100px;
        letter-spacing: 5%;
        a:hover {
            color: #D1A954;
            padding: 7px 9px;
            border: 1px solid #D1A954E5;
            align-items: center;
        }
    }
    .item__column:not(:first-child) {
        margin-left: 30px;
    }
}

.header__burger {
    padding-left: 9.6%;
}

@media(max-width:1820px) {
    .header__container {
        padding: 0px 15px;
        max-width: 1830px;
    }
}

<div class="header__container">
    <div class="header__menu">
        <div class="header__logo">
            <img src="img/logo.jpg" alt="logo">
        </div>
        <div class="header__nav">
            <ul class="nav__item">
                <li class="item__column"><a href="">Главная</a>  </li>
                <li class="item__column"><a href="">SOFIT EVENT HOUSE</a></li>
                <li class="item__column"><a href="">МЕРОПРИЯТИЯ</a></li>
                <li class="item__column"><a href="">ТУРИСТАМ</a></li>
                <li class="item__column"><a href="">КЕЙТЕРИНГ</a></li>
                <li class="item__column"><a href="">ДЛЯ АГЕНТСТВ</a></li>
            </ul>
        </div>
        <div class="header__burger">
            <img src="img/burger.svg" alt="burger">
        </div>
    </div>
</div>