Flex block collides with another block when compressed. What am I doing wrong?

Question

css

I'm new! https://codepen.io/mlnoz/pen/WNQVeKw , when we make the page already, then one of the blocks runs into the lower one, how to make it not run over, but move it lower? And one more thing, so that when it gets lower, this block does not become wider, but is just in the center horizontally? Thanks in advance for your help!!!!

Answer 1

It's all about the margin-top you give to the "about_us_text" class. When the card moves out, this indent is not enough.
Your element positioning is wrong.
Look, you've given the "header_banner" class height: 750px; The block with the "about_us" class counts from it, and not from the card with the "service_item" class.

And one more thing, so that when it gets lower, this block does not become wider, but is just in the center horizontally?

You set the width in %, which is why it gets wider as it slides down. Set the width in px.
UPD: In this case, it would be better to remove the block with the "service" class from the "header_banner" block and make it independent. And to keep it in the same place, set a negative margin-top. Then the bottommost block with text will position itself not from the block with the "header_banner" class, but from the "service" block.
(Perhaps this is not the correct way, but it works)