在此輸入圖像描述浮動元素向右移動，在頁面左側留出空白

我是一個新手，我正試圖學習CSS，按照練習冊的步驟，但即使代碼是相同的，對我來說它不工作。這是從書中復制的代碼。

:root {
  box-sizing: border-box;
}

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

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}

body * + * {
  margin-top: 1.5em;
}

.row {
  margin-left: -0.75em;
  margin-right: -0.75em;
}

.row::after {
  content: " ";
  display: block;
  clear: both;
}

[class*="column-"] {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
}

.column-1 {
  width: 8.3333%;
}

.column-2 {
  width: 16.6667%;
}

.column-3 {
  width: 25%;
}

.column-4 {
  width: 33.3333%;
}

.column-5 {
  width: 41.6667%;
}

.column-6 {
  width: 50%;
}

.column-7 {
  width: 58.3333%;
}

.column-8 {
  width: 66.6667%;
}

.column-9 {
  width: 75%;
}

.column-10 {
  width: 83.3333%;
}

.column-11 {
  width: 91.6667%;
}

.column-12 {
  width: 100%;
}

header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: 0.5em;
  margin-bottom: 1.5em;
}

.main {
  padding: 0 1.5em 1.5em;
  background-color: #fff;
  border-radius: 0.5em;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
}

.media {
  /* float: left; */
  /* margin: 0 1.5em 1.5em 0; */
  /* width: calc(50% - 1.5em); */
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}

/*
.media:nth-child(odd) {
  clear: left;
}
*/

.media-image {
  float: left;
  margin-right: 1.5em;
}

.media-body {
  overflow: auto;
  margin-top: 0;
}

.media-body h4 {
  margin-top: 0;
}

.clearfix::before, .clearfix::after {
  display: table;
  content: " ";
}

.clearfix::after {
  clear: both;
}

<div class="container">
  <header>
    <h1>Franklin Running Club</h1>
  </header>

  <main class="main clearfix">
    <h2>Running tips</h2>

    <div class="row">
      <div class="column-6">
        <div class="media">
          <img class="media-image" src="https://placehold.co/100" />
          <div class="media-body">
            <h4>Strength</h4>
            <p>
              Strength training is an important part of injury prevention. Focus on your core&mdash; especially your abs and glutes.
            </p>
          </div>
        </div>
      </div>

      <div class="column-6">
        <div class="media">
          <img class="media-image" src="https://placehold.co/100" />
          <div class="media-body">
            <h4>Cadence</h4>
            <p>
              Check your stride turnover. The most efficient runners take about 180 steps per minute.
            </p>
          </div>
        </div>
      </div>

      <div class="column-6">
        <div class="media">
          <img class="media-image" src="https://placehold.co/100" />
          <div class="media-body">
            <h4>Change it up</h4>
            <p>
              Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.
            </p>
          </div>
        </div>
      </div>

      <div class="column-6">
        <div class="media">
          <img class="media-image" src="https://placehold.co/100" />
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>
              Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.
            </p>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>