HTML: div не занимает полную ширину (только на небольших устройствах) ⇐ CSS

[Гость]

Мой HTML:



Веб-сайт

О программе Архив Администратор










Мой CSS:

#carousel-cont { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: пространство между; радиус границы: 10 пикселей; ширина: 95%; /* Регулируем ширину контейнера */ маржа: 0 авто; /* Центрируем контейнер */ цвет фона: rgb(52, 93, 226); отступ: 20 пикселей; } #prevButton, #nextButton { радиус границы: 30%; размер шрифта: большой; курсор: указатель; цвет фона: rgb(99, 124, 204); белый цвет; граница: 1 пиксель, сплошная #ccc; отступы: 5 пикселей 10 пикселей; } #card-carousel { ширина: 80%; /* Отрегулируйте ширину ваших карточек */ переполнение: скрыто; положение: относительное; } #card-carousel-inner { дисплей: гибкий; переход: преобразование 0,5 с, легкость входа и выхода; выравнивание текста: по центру; разрыв: 20 пикселей; } .карта { гибкость: 0 0 23,333333%; ширина: 300 пикселей; цвет фона: #fff; радиус границы: 8 пикселей; переполнение: скрыто; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); переход: преобразование 0,3 с; } .card-content { отступ: 20 пикселей; перенос слов: разрыв слова; } .card-content h2 { нижнее поле: 10 пикселей; размер шрифта: 1,5рем; цвет: #333; } .card-content p { цвет: #666; } навигация #icon{ размер шрифта: средний; высота строки: 40 пикселей; плыть налево; поле слева: 30 пикселей; курсор: указатель; } #icon_link{ дисплей: нет; } .кнопка{ фон: #fff; отступ: 10 пикселей 15 пикселей; цвет: #34495e; начертание шрифта: жирный; размер шрифта: средний; радиус границы: 5 пикселей; box-shadow: 6px 6px 29px -4px rgba(0,0,0,0.75); текстовое оформление: нет; переход: 0,4 с; } .button:active,#prevButton:active,#nextButton:active { преобразование: TranslateY (2px); /* Отрегулируйте объем перевода в соответствии с вашими предпочтениями */ box-shadow: 2px 2px 10px -2px rgba(0,0,0,0.75); /* Настройка тени в активном состоянии */ } .carousel-container { положение: относительное; маржа: 0 авто; ширина: 100%; } тело { семейство шрифтов: Arial, без засечек; маржа: 0; заполнение: 0; цвет фона: rgb(79, 221, 231); } .неожиданно возникнуть{ анимация: слайдИнТоп 0,5 с, легкость выхода; z-индекс: 2; фон: rgba(0,0,0,0.6); ширина: 100%; высота: 100%; позиция: абсолютная; верх: 80 пикселей; дисплей: нет; оправдание-содержание: центр; выровнять-элементы: по центру; выравнивание текста: по центру; } .popup.slide-out { анимация: слайдаутБоттом 0,5 с, легкость выхода; /* Продолжительность анимации и функция замедления при закрытии */ } вход{ поле: 20 пикселей авто; дисплей: блок; ширина: 50%; отступ: 8 пикселей; граница: 1 пиксель, сплошная серая; } .close,#close_menu{ позиция: абсолютная; верх: -15 пикселей; справа: -15 пикселей; высота: 30 пикселей; ширина: 30 пикселей; радиус границы: 50%; box-shadow: 6px 6px 29px -4px rgba(0,0,0,0.75); курсор: указатель; } #close_about{ позиция: абсолютная; верх: 0; /* Изменено с -15 пикселей до 10 пикселей */ правильно: 0; /* Изменено с -5 пикселей до 10 пикселей */ высота: 30 пикселей; ширина: 30 пикселей; радиус границы: 50%; box-shadow: 6px 6px 29px -4px rgba(0, 0, 0, 0.75); курсор: указатель; } .popup-content{ высота: 250 пикселей; ширина: 500 пикселей; фон: RGB(107, 126, 190); отступ: 20 пикселей; радиус границы: 5 пикселей; положение: относительное; } .carousel-слайды { дисплей: гибкий; ширина: 100%; переполнение: скрыто; } .carousel-slide { дисплей: нет; ширина: 100%; анимация: постепенное затухание в течение 1,5 с; /* Анимация исчезновения длительностью 1,5 секунды */ } .carousel-slide img { граница: 2 пикселя, сплошная черная; ширина: 100%; высота: 400 пикселей; /* Устанавливаем высоту в 100% от высоты области просмотра */ объектное соответствие: обложка; } заголовок { граница: 2 пикселя сплошной RGB (52, 93, 226); цвет фона: rgb(99, 124, 204); белый цвет; высота: 80 пикселей; отступ: 10 пикселей; выравнивание текста: по центру; дисплей: гибкий; выровнять-элементы: по центру; /* Элементы по центру по вертикали */ } заголовок изображения { высота: 80 пикселей; поле справа: 10 пикселей; } #первый { поле справа: авто; /* Сдвигаем первое изображение в крайнее левое положение */ } #второй { поле справа: 20 пикселей; /* Нет поля справа для второго изображения */ поле слева: 0; /* Для второго изображения нет поля слева */ } заголовок h1 { маржа: 0; /* Нет поля для элемента h1 */ } #третий { поле слева: авто; /* Сдвигаем третье изображение в крайнее правое положение */ } навигация { цвет фона: rgb(55, 83, 173); переполнение: скрыто; дисплей: гибкий; оправдание-содержание: пространство вокруг; /* Равномерно распределяем дочерние элементы */ } навигация { белый цвет; выравнивание текста: по центру; отступ: 14 пикселей 16 пикселей; текстовое оформление: нет; гибкий: 1; /* Равное распределение пространства между дочерними элементами */ положение: относительное; /* Добавлено относительное позиционирование */ переход: фоновый цвет — легкость 0,3 с; /* Добавлен эффект плавного перехода */ } nav a:hover, .popup a:hover { цвет фона: RGB(107, 126, 190); /* При необходимости отрегулируйте цвет и непрозрачность фона */ } #header_row{ положение: фиксированное; ширина: 100%; z-индекс: 20; } Мой сайт выглядит так:





Как вы можете видеть на изображении (отмечено красным), carousel-container и элемент div ниже не занимают всю ширину. Странным образом это происходит только на мобильных устройствах, хотя я применил 100% ширину к ним обоим. Как это исправить? Пожалуйста, помогите мне.

Где я ошибаюсь?