Easiest way to line up different containers/divs?

HTML-CSS
1

Here’s my attempt so far for a challenge I’m doing I want all the boxes to line up as in the below photo. (the sides of the frame)

I’m really struggling as it seems Im using more code than I need to or simply guessing. Even worse when I start to make it responsive.

Here’s the same page but I’ve removed most of the CSS as I want to take the shortest route possible to solving this.

Grateful for any advice,

Cheers.

desktop-design
desktop-design1440×800 81.3 KB

2

Add 12 or 13px of padding to .review in your CSS and justify-content: center; to your .review-con

1 Like
3

Thank you, this should work. I’ve gone back to basics so everything has a zero margin then I can apply your method uniformly.

i.e my header was about 20px from the main div which I chose to address towards the end of everything else which means I had to guesstimate to get the other header the same level whereas now, I’ve started again added margin-top: 0; So everyting is nice and snug towards the edge, no guesses and uniform padding gets everything even! =}

1 Like