Как сделать чтобы хедер с position: absolute не прилипал к экрану при сжатии?

На данный момент моя разметка выглядит следующим образом:

    <header class="header">
            <div class="header__inner">
                <a href="" class="logo logo_position_header">
                    <img src="images/logo.svg" alt="tines logo" class="logo__image" />
                </a>
                <nav class="header__nav">
                    <ul class="header__list">
                        <li class="header__item">
                            <a href="#" class="header__link">Products</a>
                        </li>
                        <li class="header__item">
                            <a href="#" class="header__link">Use cases</a>
                        </li>
                        <li class="header__item">
                            <a href="#" class="header__link">Resources</a>
                        </li>
                        <li class="header__item">
                            <a href="#" class="header__link">Company</a>
                        </li>
                        <li class="header__item">
                            <a href="#" class="header__link">Pricing</a>
                        </li>
                    </ul>
                </nav>
                <button class="btn btn__modal-open btn_color_purple" data-modal="1">Sign up for free</button>
            </div>
    </header>

Элементы имеют следующие стили:

.header{
background-color: var(--color-light);
border-radius: 28px;
box-sizing: border-box;
padding: 20px 0 20px 0;
position: absolute;
z-index: 1;
max-width: 1230px;
width: 100%;
top: 50px;
left: 50%;
transform: translateX(-50%);
right: 0;
}

.header__inner{
display: flex;
align-items: center;
justify-content: space-between;
}

.container{
max-width: 1230px;
padding: 0 15px;
margin: 0 auto;
box-sizing: border-box;
}

Думаю все стили смысла скидывать нет, скинул основные. Собственно в чем вопрос, как задать хедеру внешние отступы чтобы при сжатии хедер не прилипал к экрану? Пробывал контейнер сделать родителем для хедера, ничего не поменялось, хедер при сжатии всё равно прилипает к экрану. Если добавляю margin, то верстка просто ломается (см. скрин 2 )