Four Card Section using HTML+CSS (Flexbox)

wrap the 4 boxes in a section use flex in it and give flex-direction column, make three columns inside that section, the 1st box in 1st column, the two center boxes in 2nd column,3rd box in the 3rd column in this way you can give it proper structure without using the transform property. see my solution to this challenge for any help https://www.frontendmentor.io/solutions/fourcardfeaturesectionmaster-solution-using-html-and-css-o2VKoPxKH hope this will help

I think you use too many useless div wrapper. For example, supervisor class don't need to be wrapped with box and box1 div. You can simply use flexbox in boxes container to arrange the cards.

Usring flexbox with positions you can solve this problem. No need to use transform.