This is what the final styles should look like, I think:

body {
  margin: 0;
  padding: 40px;
}

.row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.tile {
  width: 300px;
  height: 300px;
  background-color: #ddd;
}

I also edited the codepen here https://codepen.io/tobycodes/pen/xxrEgje.

The trick is justify: center; and gap: 16px;. You can read more about the gap property here: https://developer.mozilla.org/en-US/docs/Web/CSS/gap. The property is a shorthand for grid-gap but works perfectly for flexbox.

.tile {
  width: 300px;
}

remove width from tile class to tile width equals parent div width

I am attempting to create a set of columns that degrades gracefully from three columns to one with css. Normally I’d be fine doing this, but the requirement is that the item in each column should stay fixed in size, and that the columns should have 16px of spacing in between them at all times.

Here is what I am looking for:

However, when I add a width property to my columns, the spacing in between them grows much larger. I am stumped on how to keep the columns the same as the screen changes sizes. I know that inevitably the smaller I go, I will have to change the column widths with a media query to get them to turn into two columns, and then one, so that’s not a problem.

Here is a picture of what is happening with the spacing of the columns when I set a width on the columns:

Oh, and of course, here is the code, and a codepen link. I recommend running it full screen with the SO editor, because since I haven’t done any responsive css, the columns just condense into one big block, and its hard to see what’s going on.

body {
  margin: 0;
  padding: 40px;
}

.row {
  display: flex;
}

.tile {
  width: 300px;
  height: 300px;
  background-color: #ddd;
  margin-right: 8px;
  margin-left: 8px;
}

.col {
  width: 33.33%;
}

<div class="row">
  <div class="col">
    <div class="tile"></div>
  </div>

  <div class="col">
    <div class="tile"></div>
  </div>

  <div class="col">
    <div class="tile"></div>
  </div>
</div>