列表样式时仍保留一些垂直空间：未定义任何内容。
https://product-landing-page.freecodecamp.rocks/#how-it-works
如果您选中此项目并滚动到定价标签，则其定义与我的定价标签完全相同，并且其行为也不同。
My price label:
Project's label
我的CSS：

/* ========== PRICE ======= */

#cost {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.price-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% / 3);
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
}

.lvl {
  background-color: #dddddd;
  text-align: center;
  font-size: 1.4em;
  color: rgb(65, 65, 65);
  padding: 5px;
  width: 100%;
}
#cost ol li {
  padding: 5px 0;
  margin: 0;
}

li {
  list-style: none;
}

项目的CSS：

#pricing {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% / 3);
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
}

.product > .level {
  background-color: #ddd;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
}

.product > h2 {
  margin-top: 15px;
}

.product > ol {
  margin: 15px 0;
}

.product > ol > li {
  padding: 5px 0;
}

也许有人能给我解释一下，这样我就能明白这里发生了什么