Сохранять поле абсолютного позиционирования и центрированного элемента div при изменении размера окна

Question

У меня есть несколько div на моей странице, которые служат контейнерами. Вот пример кода CSS одного из divs:

header {
    background-color: #fff;
    height: 153px;
    width: 97%;
    min-width: 1084.06px;
    margin: 15px auto;
    position: absolute;
    left: 0; 
    right: 0;
    border-radius: 20px;
}

Это центрированный контейнер для моего заголовка. Есть несколько других контейнеров, которые я стилизовал аналогично (абсолютные, центрированные и ширина в%).

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

PS если я добавлю margin-left это нарушает мою центральную позицию div

Answer 1

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

Например, следующее правило цвета фона не будет применяться для экранов шире, чем 480px:

@media screen and (max-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Для получения дополнительной информации о медиа-запросах см. Эту страницу w3schools

Answer 2

Добавьте еще поле справа, затем выровняйте его в зависимости от того, что вы используете