Flexbox gap workaround for Safari

Use the Lobotomized owl selector: .parent > * + * {} to add a margin-left that gives you space between the elements that come after another element, this way you eliminate the undesired margin it creates when you put the margin directly to the child's first element (.social-media img{})

    .social-media > * + * { margin-left: 8rem;}

Here you can read more about the Lobotomized Owl Selector

Edit: Gap is now supported in safari so you should be able to use it no problem.

Property gap with display: flex is not supported by Safar version < 14 https://caniuse.com/flexbox-gap . You might want to replace display flex with grid:

display: grid;
grid-gap: 8rem; /* Safari 10-11 */
gap: 8rem;      /* Safari 12+ */

because grid's gap is supported in older Safari versions: https://caniuse.com/mdn-css_properties_gap_grid_context

I think you could make a div container and put justify-content: space-between; then i think it should work

The accepted answer has the problem, that you will have a wrong margin on the first element if when there is only one row. Also centered elements will always be 8rem too far the right.

Better solution that will always work with correct spacings:

.container {
  display: flex;
  // the trick is to set margins around boxes, but correct the margins around elements that are situated at the border of the container with negative margins
  margin: 0 -10px -20px -10px;
}

.box {
  min-width: 100px;
  height: 100px;
  background-color: deeppink;
  margin: 0 10px 20px 10px;
}

<div class='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
</div>

You can remove the gap class and add another one to child elements

<div class="d-flex"> // it was "d-flex gap" previously
  <div class="mx-2">
    //content
  </div>
  <div class="mx-2">
    //content
  </div>
</div>