Дисплей: гибкость и ширина: 100 %. Проблема с ul-контейнером, который не расширяется до полной ширины. ⇐ CSS

[Anonymous]

Я пытаюсь создать ul-контейнер с display: flex, занимающий 100% ширины родительского элемента. Однако когда размер экрана уменьшается, ul не поддерживает ширину 100%. Если я удалю display: flex, он будет работать как положено. Вот мой HTML и CSS:
вот код, который вы должны поместить на ширину 776 пикселей

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

.aboutus-container {
background-color: #EDF2E7;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}

.aboutus-content {
display: flex;
width: 90%;
}

.aboutus-text {
width: 50%;
display: flex;
flex-direction: column;
padding: 20px;
}

.aboutus-photo-container {
width: 50%;
}

.aboutus-photo-container img {
width: 100%;
height: 100%;
}

.aboutus-card {
list-style: none;
display: flex;
flex-direction: column;
background-color: #7FA154;
padding: 24px;
border-radius: 10px;
justify-content: center;
align-items: center;
}

.aboutus-card-container {
display: flex;
padding-left: 0;
gap: 15px;
width: 100%;  /* Ensure full width */
box-sizing: border-box;  /* Include padding and border in width */
}

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

Sobre Nosotros
Algun texto aca 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
[list]
[*]

Años de experiencia

[*]

Unidades construidas

[*]

calidad en nuestros procesos

[/list]


[img]{aboutus} alt=[/img]

Как вы можете видеть на изображении, карточки перекрывают изображение, а не занимая 100 % ширины
Вот как страница выглядит на маленьком экране
[img]https://i .sstatic.net/xUbT8piI.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/785 ... -full-widt