<div class="container">
  <div class="flex-parent">
    <div class="flex-item">
      flex-item
    </div>
    <div class="flex-item">
      flex-item
    </div>
    <div class="flex-item">
      flex-item
    </div>
  </div>
</div>

.flex-parent {
  background: pink;
  display: flex;
}

.flex-item {
  padding: 0.5em;
  background: #efefef;
  border: 3px solid #333;
}

/* =========================
   GENERAL STYLES 
   NOT RELATED TO THE TUTORIAL
============================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --clr-primary: #ee6352;
  --clr-secondary: #d16e8d;
  --clr-accent: #f7f7ff;
  --clr-gradient: linear-gradient(
    -90deg,
    var(--clr-primary),
    var(--clr-secondary)
  );
  --ff-title: bungee, sans-serif;
  --ff-body: canada-type-gibson, sans-serif;
  --fw-body: 300;
  --fw-bold: 800;
  --fw-title: 400;
  --fw-number: 800;
}

body {
  min-height: 100vh;
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
}

.container {
  width: min(95%, 45rem);
  margin: 0 auto;
}