<section class="container">
      <h1>Using wide spaces:</h1>
    <div class="row wide-spaces">
      <span><a class="button button--pink" href="https://www.matise.nl/" target="_blank">
        Go to Matise
      </a></span>
      <span><a class="button button--borderpink" href="https://www.cydstumpel.nl/" target="_blank">
        Go to my portfolio
      </a></span>
      <span><a class="button button--black" href="https://www.google.com/search?q=meerkats" target="_blank">
        Meerkats
      </a></span>
      <span><a class="button button--borderpink" href="https://dev.to/cydstumpel" target="_blank">
        Link to my Dev.to account
      </a></span>
    </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.wide-spaces span::after {
  content:' ';
  line-height:0;
  font-size:14em;
  vertical-align:top;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 3rem;
  border-radius: 2rem;
  text-decoration: none;
  max-width: 100%;
  margin-bottom:10px;
}
.button--pink {
  background: hotpink;
  color: white;
}
.button--borderpink {
  border: 2px solid hotpink;
  color: hotpink;
}
.button--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.