Блок Flex при сжатии наезжает на другой блок. Что делаю неправильно?

Question

[mlnoz]

Я новичёк! https://codepen.io/mlnoz/pen/WNQVeKw , когда делаем страницу уже, то один из блоков наезжает на нижестоящий, как сделать что бы, он не наезжал, а смещал его ниже? И ещё, что бы этот блок когда становится ниже, не становился шире, а находился просто в центре по горизонтали? Заранее максимально признателен за помощь!!!!

Answer 1

[n1ksON]

Всё дело в margin-top, который вы задаёте классу "about_us_text". Когда съезжает карточка, этого отступа недостаточно.
У вас не правильно построено позиционирование элементов.

Смотрите, вы классу "header_banner" задали height: 750px; От него блок с классом "about_us" ведёт свой отсчёт, а не от карточки с классом "service_item".

И ещё, что бы этот блок когда становится ниже, не становился шире, а находился просто в центре по горизонтали?

Вы задаёте ширину в %, поэтому он и становится шире, когда съезжает вниз. Задавайте ширину в px.

UPD: В данном случае, лучше будет вынести блок с классом "service" из блока "header_banner" и сделать его самостоятельным. А чтобы он остался на том же месте, задайте отрицательный margin-top. Тогда самый нижний блок с текстом будет вести своё позиционирование не от блока с классом "header_banner", а от блока "service".
(Возможно это некорректный способ, но рабочий)

Answer 2

[WapSter]

.header_banner {
    opacity: 0.9;
    background-color: #330066;
    background-image: linear-gradient(45.0deg, #0169b4 18%, #a72b8f 81%);
    background-position: center;
    background-repeat: no-repeat;



   // ты задал блоку высоту элементы не поместились в эту высоту и ушли за границу блока
   height: 750px;
}