Как сделать, чтобы элемент всегда был в одной точке на разных экранах?

Question

[Shine_97]

Делаю боковой сайдбар через свойство "position: sticky". Уже почти все получилось, но на разных экранах сайдбар пляшет.
Реализовал позиционирование с помощью "right: 18%", иначе прилипает к краю экрана

но если поменять разрешение экрана, то сайдбар уезжает


Если оберну в общий родитель, то не смогу задавать background для секции, чтобы он был на весь экран

Подскажите, пожалуйста, есть ли способ зафиксировать сайдбар в одном положении на разных экранах? Ссылка на CodePen

Comments

[Rustam Bainazarov]

Общий родительский контейнер вам в помощь, относительно которого и будут выставлены размеры ваших колонок.

[Shine_97]

Рустам Байназаров, Забыл указать, что если оберну, то не смогу задавать background для секции, чтобы он был на весь экран (CodePen обновил)

[Rustam Bainazarov]

Shine_97, доп. обёртка, тогда всё получится. Это и будет секцией. Внутри секции — контейнер для контента, который ограничен по ширине.

[Shine_97]

Рустам Байназаров, уже пробовал по разному, может есть какой-нибудь пример? Потому что не сильно понимаю

[Rustam Bainazarov]

Shine_97, ладно, сделал, откройте на большом экране, тогда увидите:



Красный фон — вот ваша секция. Белым подсветил контент:

Answer 1

[азаза]

так оберните left и right в общий контейнер
и не будет плясать

Comments

[Shine_97]

Забыл указать, что если оберну, то не смогу задавать background для секции, чтобы он был на весь экран (CodePen обновил)

[азаза]

Shine_97,
Сделайте секцию 100% ширины с background
В снкцию вложитей контейнер с определенной максимальной шириной и margin auto.
А внутрь контейнера вложите контент и сайдбар