Верстка на гридах

Есть проблема некоторая с версткой на гридах. Не могу разобраться, в чем дело. Что-то делаю дне так, но не понимаю, что именно. Отступ между ссылками навигации - 50px. От ссылок до иконок - 245px; Слева и справа должно выравниваться автоматически. То бишь все располагается посередине, от блока с ссылками до блока с иконками - 245px. Имеется компонент хедера:

<header className={cn(className, styles.header)} {...props}>
        <div>
            <ul className={styles.ul}>
                <li><a href="#"><Htag tag="h3" weight="w700" size="r13">Абонементы</Htag></a></li>
                <li><a href="#"><Htag tag="h3" weight="w700" size="r13">Услуги</Htag></a></li>
                <li><a href="#"><Htag tag="h3" weight="w700" size="r13">Расписание</Htag></a></li>
                <li><a href="#"><Htag tag="h3" weight="w700" size="r13">Контакты</Htag></a></li>
                <li><a href="#"><Htag tag="h3" weight="w700" size="r13">Личный кабинет</Htag></a></li>
            </ul>
        </div>
        <div className={styles.icons}>
            <a href=""><VkIcon /></a>
            <a href=""><InstIcon /></a>
            <a href=""><TgIcon /></a>
        </div>
    </header>

CSS стили:

.header {
    display: grid;
    grid-template-columns: auto 1fr 245px 1fr auto;
    grid-template-areas: ". ul . icons .";

    align-items: center;
}

.nav {}

.header li {
    list-style-type: none;

    letter-spacing: 0.05em;
    text-transform: uppercase;

    line-height: 130%;
}

.header a:hover {
    transition: 0.3s;

    color: var(--ultra-dark-gray);
}

.ul {
    grid-area: ul;

    display: flex;
    gap: 50px;

    padding: 0;
}

.icons {
    grid-area: icons;

    display: flex;
    gap: 20px;
}

Ожидаемый результат:

Фактический результат: