Flex items equally distances from each other, as well from the parent's edge
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

// Main code
.wrapper {
  display: flex;
  justify-content: space-between;

  &::before,
  &::after {
    content: '';
  }
}

// Demo styling
* { box-sizing: border-box; }

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 50px 20px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

.wrapper {
  border: 1px solid #5098D5;
  margin: 10px auto;
  max-width: 1000px;

  div {
    background: #7FE2C3;
    color: #333;
    flex-basis: 20%;
    height: 60px;
    text-align: center;
  }
}