<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
      <span><a class="button button--borderpink" href="https://www.cydstumpel.nl/" target="_blank">
        Go to my portfolio
      <span><a class="button button--black" href="https://www.google.com/search?q=meerkats" target="_blank">
      <span><a class="button button--borderpink" href="https://dev.to/cydstumpel" target="_blank">
        Link to my Dev.to account
* {
  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:' ';

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 3rem;
  border-radius: 2rem;
  text-decoration: none;
  max-width: 100%;
.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.