Почему мои элементы .summary и img не выравниваются рядом друг с другом? У меня есть раздел div с class="resume-container", содержащий три элемента. Первый элемент «контактная информация» должен растягиваться на всю ширину экрана, второй и третий элементы, сводка и изображение, должны располагаться рядом под первым элементом, каждый из которых будет занимать половину доступного места на экране. Я решил использовать flex, чтобы сайт можно было адаптировать к экранам разных размеров. Есть ли лучший способ сделать это?
.resume-container { дисплей: гибкий; flex-wrap: обертка; маржа-верх: 0,5%; } .Контактная информация { цвет фона: #206977ad; выравнивание текста: по центру; граница-радиус: .4rem; отступ-верх: 0,1рем; отступ-дно: 0,1рем; нижняя граница: 0,8%; выровнять-сам: центр; гибкий рост: 2; выровнять-самостоятельно: растянуть; минимальная ширина: 95%; } .краткое содержание { максимальная ширина: 45%; цвет фона: #a1cd6c91; отступ справа: .7em; отступ слева: .7em; граница-радиус: 2rem; гибкий рост: 1; } .summary р { размер шрифта: 1,5рем; высота строки: 1,25em; выравнивание текста: по центру; } .img-контейнер img { максимальная ширина: 45%; маржа слева: 0,8%; граница-радиус: 2rem; ... ...
Вывод

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