<section class="container">
    <h1>Using min margins:</h1>
  <div class="row min-margins">
    <a class="button button--pink" href="https://www.matise.nl/" target="_blank">
      Go to Matise
    </a>
    <a class="button button--borderpink" href="https://www.cydstumpel.nl/" target="_blank">
      Go to my portfolio
    </a>
    <a class="button button--black" href="https://www.google.com/search?q=meerkats" target="_blank">
      Meerkats
    </a>
    <a class="button button--borderpink" href="https://dev.to/cydstumpel" target="_blank">
      Link to my Dev.to account
    </a>
  </div>
  <h1>Using margin-right:</h1>
  <div class="row margin-right">
    <a class="button button--pink" href="https://www.matise.nl/" target="_blank">
      Go to Matise
    </a>
    <a class="button button--borderpink" href="https://www.cydstumpel.nl/" target="_blank">
      Go to my portfolio
    </a>
    <a class="button button--black" href="https://www.google.com/search?q=meerkats" target="_blank">
      Meerkats
    </a>
    <a class="button button--borderpink" href="https://dev.to/cydstumpel" target="_blank">
      Link to my Dev.to account
    </a>
  </div>
  <h1>Using sibling selectors:</h1>
  <div class="row siblings">
    <a class="button button--pink" href="https://www.matise.nl/" target="_blank">
      Go to Matise
    </a>
    <a class="button button--borderpink" href="https://www.cydstumpel.nl/" target="_blank">
      Go to my portfolio
    </a>
    <a class="button button--black" href="https://www.google.com/search?q=meerkats" target="_blank">
      Meerkats
    </a>
    <a class="button button--borderpink" href="https://dev.to/cydstumpel" target="_blank">
      Link to my Dev.to account
    </a>
  </div>
</section>
* {
  font-family: Helvetica, sans-serif;
  margin: 0;
  box-sizing: border-box;
}

h1 {
  text-align: center;
  margin: 20px 0 10px;
}
body {
  padding: 10vw;
}

.container {
  border: 1px solid red;
  max-width: 520px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  &.margin-right {
    .button {
      margin: 10px 4rem 0 0;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  &.siblings {
    .button {
      margin-top: 10px;
      & + .button {
        margin-left: 4rem;
      }
    }
  }
  &.min-margins {
    margin: 0 -2rem;
    .button {
      margin: 10px 2rem 0;
    }
  }
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 3rem;
  border-radius: 2rem;
  text-decoration: none;
  &--pink {
    background: hotpink;
    color: white;
  }
  &--borderpink {
    border: 2px solid hotpink;
    color: hotpink;
  }
  &--black {
    background: black;
    color: white;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.