Div Position Madness!

Code Feedback
1

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.

Pasted image636×785 5.78 KB

2

Flexbox will save you:

3

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.

4

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">