Отступы приводят к смещению контента при просмотре на мобильных устройствах — как сохранить центрирование и отзывчивость ⇐ CSS

[Anonymous]

Я настраиваю веб-сайт WordPress, на котором я отрегулировал ширину некоторых разделов (например, страниц «О программе» и «Контакты») с помощью CSS-отступов, чтобы контент выглядел более центрированным и читабельным на экранах настольных компьютеров.
Однако при просмотре на мобильных устройствах одно и то же отступы приводит к появлению нежелательных пробелов с обеих сторон, из-за чего макет выглядит сжатым, а не по всей ширине.
Вот пример того, что я имею в виду: макет выглядит нормально на настольном компьютере, но на мобильном устройстве с обеих сторон видно пустое пространство.
Для справки вы можете посмотреть живой пример здесь: Карта округа Мичиган
.
Вот CSS, который я использовал до сих пор:

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

.about-section {
padding-left: 14%;
padding-right: 14%;
}

.contact-section {
padding-left: 20%;
padding-right: 20%;
}

Я пробовал использовать проценты вместо пикселей, чтобы сделать его отзывчивым, но он по-прежнему плохо масштабируется на мобильных устройствах. Я также экспериментировал с настройкой различных отступов с помощью медиа-запросов, но результаты были непостоянными — иногда контент по-прежнему кажется смещенным по центру или не масштабируется должным образом.
Как лучше всего сделать этот макет полностью адаптивным — чтобы контент оставался по центру на рабочем столе, но автоматически растягивался на всю ширину (или удобную ширину для мобильных устройств) на небольших устройствах?
Следует ли мне использовать max-width, Margin: auto или совершенно другой подход для лучшего реагирования?
Будем очень признательны за любые идеи или рекомендации по решению подобных проблем в темах WordPress.
Я попробовал настроить отступы, используя как процентные, так и пиксельные значения, а также добавил медиа-запросы для меньших областей просмотра. Я ожидал, что контент будет оставаться по центру и плавно масштабироваться на экранах мобильных устройств, но вместо этого он создает пустое пространство с обеих сторон и не выглядит на полную ширину.

Подробнее здесь: https://stackoverflow.com/questions/797 ... entered-an