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

Question

[FIain]

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

<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;
}

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




Загрузил на codepen, немного криво, но суть ясна

Comments

[Ankhena]

Обычно иннеру задают стили контейнера, или вторым классом или примешивают.
У контейнера ограничивают ширину и центрируют. Можно задать паддинги.

Песочницу не смотрела, с телефона не удобно.