为什么这个 flexbox 容器的子元素末端没有空间？

Question

我正在按照教程制作一个网站，在特定部分中，我们必须制作一个包含三个子元素的 flexbox 容器。我已经检查并重新检查了我的代码，它与视频相同，但 flex 容器的左右端没有任何空间。为什么不工作？ （我在下面给出了 CSS 代码）

.row {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}

.course-col {
  flex-basis: 31%;
  background: #fff3f3;
  border-radius: 10px;
  margin-bottom: 5%;
  padding: 20px 12px;
  box-sizing: border-box;
  transition: 0.5s;
}

/* this is the title of the child elements*/
 h3 {
  text-align: center;
  font-weight: 600;
  margin: 10px 0;
}

.course-col:hover {
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
}

@media (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

这是 HTML 代码：

<!--  COURSES  !-->

    <section class="course">
      <h1>Courses We Offer</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <div class="row">
          <div class="course-col">
            <h3>Intermediate</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="course-col">
          <h3>Degree</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="course-col">
          <h3>Post Graduation</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </section>

Answer 1

只试试这个：

.row {
  margin-top: 5%;
  display: flex;
  justify-content: space-around;/* here */
}

还有：

@media (max-width: 700px) {
  .row {
    flex-direction: column;
    margin: auto 10px; /* here */
  }
}

Answer 2

*{
margin:10px;
}
.row {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}

.course-col {
  flex-basis: 31%;
  background: #fff3f3;
  border-radius: 10px;
  margin-bottom: 5%;
  padding: 20px 12px;
  box-sizing: border-box;
  transition: 0.5s;
}

/* this is the title of the child elements*/
 h3 {
  text-align: center;
  font-weight: 600;
  margin: 10px 0;
}

.course-col:hover {
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
}

@media (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}
This is the HTML code :

<!--  COURSES  !-->

    <section class="course">
      <h1>Courses We Offer</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <div class="row">
          <div class="course-col">
            <h3>Intermediate</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="course-col">
          <h3>Degree</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="course-col">
          <h3>Post Graduation</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </section>