Как убрать сдвиг содержимого сайта при появлении полосы прокрутки? HTML/CSS

Проблема

Я прохожу курс JavaScript/Front-end 2023Q1 от The Rolling Scopes и в очередном задании нужно сделать аккордеон используя только HTML и CSS.

Задача легкая, но при реализации я столкнулся с проблемой. Когда на сайте находится только аккордеон, при наведении на нераскрывшийся пункт он открывается и появляется полоса прокрутки, которая, в свою очередь, сдвигает весь мой контент влево:

Решение проблемы

Добавляем стили для HTML:

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

overflow-x: hidden; скрываем все выступающее по оси Х.

margin-right: calc(-1 * (100vw - 100%)); здесь остановлюсь подробнее.

vw (viewport width) — это относительная единица измерения которая задает размер относительно размеров окна браузера (viewport). 100vw равняется полной ширине вьюпорта.

% — размер относительно родительского элемента.

Таким образом, выражением (100vw - 100%) мы находим ширину полосы прокрутки браузера. У результата меняем знак на противоположный умножением на -1 и отступаем справа на это значение.