How do I get these on top of each other?

How do I get these boxes right next to each other?

There are so many options.

  • Set display: inline-block; on each of the boxes
  • Wrap the boxes in a flex container, and set the direction to row
  • Wrap the boxes in a grid container, and set the grid template to have three columns

And many more, probably.

that did not work im afraid ):

image
all it did is move the text but not the box

body {

margin: 0;

}

h1 {

margin-top: 0;

}

.topContainer {

background-color: red;

height: 200px;

width: 200px;

margin: 0px;

display: inline-block;

}

.middleContainer {

background-color: blue;

height: 200px;

width: 200px;

margin: 0;

}

.bottomContainer {

background-color: green;

height: 200px;

width: 200px;

margin: 0;

}

div {

background-color: #e4f9f5;

}

Can you make a codepen and share the link?

ah it was the padding :stuck_out_tongue:

I’m thinking I misunderstood and thought you wanted to line them up horizontally :man_facepalming:


nah just one box on top of the other like connecting (: it’s hard to understand sometimes when it’s just typing so no worries. I worded it wrong most likely. i’m new at this. thanks.