Color blocks positioning: Website Design Guidelines project

Hello! I am currently battling the practice project of a web page with design guidelines for a website (colors to be used etc). However, my old nemesis the display positioning (well, for the given value of old - I’ve only started learning HTML/CSS a week ago…) continues to thwart me. I’ve managed to position the color blocks in a non-vertical way by fiddling with margins, but by the fourth one it became obvious that I am doing something wrong (especially given the eventual look of the black border of the overall section div). Could you take a look at it, please?

Just try inline-block instead of block, I’ve just done that project one week ago so I’m not an expert