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 ):
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 
I’m thinking I misunderstood and thought you wanted to line them up horizontally 
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.