Div Position Madness!

So, basically, I am trying to create a tribute page here to Tesla, and I have this basic idea of having a single large block (which is already made) and three blocks right under it, styled the same way, each being one third the size of the block above it. I cannot figure out (at least not so far) how to get them to be positioned accordingly.

Margins don’t make sense as the position is relative to the block/column, not to the page itself. Its almost as if i need to set a negative margin from the vertical center of the page (if that makes sense) for the first block, center the second one, and set a positive margin away from the center for the third block.

I made a draft in paint to explain, see below.

Flexbox will save you:

I have no idea what that is, however from about 7 seconds worth of glancing (yes, 7 entire seconds) i’m getting the feeling that if I rip that apart I’ll have the answer to this problem and all applications of these particular points.

Thank you for providing me the (seemingly) best answer possible.

Have you tryied to use bootstrap with the casses col-xs-4 in each box? you have to nest this in a <div class="row">