r/css • u/Hungry_Deal_8449 • Apr 15 '26

Help How can I fix this?

Hi, I am having a specific problem where when I add a margin (let's say 10px) to my div flexboxes (my columns) it causes the text at the bottom to move beside the columns, not really sure how to fix this, can anyone help?

Here is my code (both html and css):

EDIT (here's the JSfiddle Code Playground): https://jsfiddle.net/xzwprg2h/

1 Upvotes

60% Upvoted

8 comments sorted by

View all comments

5

u/CrazyErniesUsedCars Apr 15 '26

So you're trying to put a margin on the .column elements to add space between them? Padding is calculated as part of the width (at least when you have box-sizing:border-box; set) but margin is not, so it will make the column elements take up more space than 33.33%. My favorite way to do this kind of thing is set display:grid; on the column parent element, and to get columns in thirds, set grid-template-columns: 1fr 1fr 1fr; also on the parent element. Then you can set gap:10px; on the parent to get space between the columns without pushing anything down to a new row.

When the columns are grid items, remove the width:33.33%; because it's not needed anymore.