Div One
Div Two
Div Three

Float method

Div One
Div Two
Div Three



I cannot make them perfectly evenly spaced... yet. Also why is this paragraph merging with the divs? Can it not sense the bottom border?

I don't remember what I did but I got the paragraph to not merge with it. I think because I adjusted the padding within the div.

Possibly the spacing issue is caused by 1, the thick borders, or 2, margins? If I have margins on these? No I'm pretty sure i don't.


Inline-block method

Div One
Div Two
Div Three

Nice. Easier. Also my paragraph isn't merging with it, which is good.


Flexbox method

Div One
Div Two
Div Three

Okay no but managing all these boxes that keep randomly appearing/changing size is gonna be a problem.

OH WAIT I KNOW WHY. These are divs within a div. The div in the back is just the div that contains the divs. Idk why it's showing through though.

Grid method

Div One
Div Two
Div Three

Everytime I edit the code for this it just looks more off-center and out of alignment. Why is it going over the edge of the page? The width is set to 100%?

Also how come, for both this and flex, they come out of the bottom of the parent div?

OHHHHHH THE PADDING. duh.

ALSO I KNOW WHY THEY WON;T BE EVENLY SPACED. I set the width of each to "33%" but that's the percentage of the whole width of the screen, not just the % of the width of my headings and paragraphs that have margins.

Hmm.... I wonder if that can change if I add margins to the body element... like does it take percentages of the BODY or percentages of just the whole screen? I can see why people prefer to work with pixels.

Also, I think the reason the grid divs are going over the edge of the screen is because... margins? I didn't add margins to this one though.

Anyway, I'm sure I'll learn more about this when I get to CSS, so I'll just stop here.