Линии перемещаются, когда окно браузера становится меньше — CSS ⇐ Html

[Anonymous]

Как уже описано в заголовке, строки не остаются на своих местах, когда окно становится меньше. Все должно оставаться статичным.
Мой CSS

Код: Выделить всё

    position: absolute;
top: 18.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.switch_lines.active {
width: 5.81875rem;
height: 0.0625rem;
background: #FFF;
}

.switch_lines.inactive {
width: 5.81875rem;
height: 0.0625rem;
background: #555555;
}

Подробнее здесь: https://stackoverflow.com/questions/793 ... maller-css