Html 我试图用css flexbox创建一个3列网格，但并不是所有的网格都在排队。我做错了什么？

以下是该页面的链接：

我肯定这可能与页边空白或填充有关，但我似乎无法解决这个问题。我希望白色框/区域与其他定价框对齐，但它会向右移动5-6像素。下面是我正在努力解决的代码片段：

<style> #pricing {margin-top: 20px; 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: 25px;} .product > ol {margin: 5px 0;} .product > ol > li {padding: 2px 0; color: black;} .product > button {border: 0; margin: 25px 0; background-color: #dee21e; font-weight: 400; font-family: oswald; width: 120px; height: 30px;} .product > button:hover {background-color: white; transition: background-color 1s;} @media (max-width: 800px) {#pricing {flex-direction: column;} .product {max-width: 300px; width: 100%; margin: 0 auto; margin-bottom: 10px;} </style>

<section id="pricing">
  <div class="product" id="avanti">
    <div class="level">Avanti West Coast</div>
    <h2>$15/month</h2>
    <ol>
      <li>Travel the west coast for cheaper.</li>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum dolor.</li>
      <li>Lorem ipsum.</li>
    </ol>
    <button class="btn">Learn More</button>
  </div>
  <div class="product" id="crosscountry">
    <div class="level">CrossCountry</div>
    <h2>$20/month</h2>
    <ol>
      <li>Take your train trip up a notch with CrossCountry.</li>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum dolor.</li>
      <li>Lorem ipsum.</li>
    </ol>
    <button class="btn">Learn More</button>
  </div>
  <div class="product" id="gwr">
    <div class="level">GWR</div>
    <h2>$25/month</h2>
    <ol>
      <li>Travel Europe for much cheaper with GWR.</li>
      <li>Great for the East coast.</li>
      <li>Lorem ipsum dolor.</li>
      <li>Lorem ipsum.</li>
    </ol>
    <button class="btn">Learn More</button>
  </div>
</section>

#定价{页边距顶部：20px；显示：弹性；弹性方向：行；对齐内容：中心；}.product{显示：弹性；弹性方向：列；对齐项目：中心；文本对齐：中心；宽度：计算（100%/3）；页边距：10px；边框：1px实心#000；边框半径：3px；}.product>.level{背景色：#ddd；颜色：黑色；填充：15px 0；宽度：100%；文本转换：大写；字体重量：700；}.product>h2{margin top:25px；}.product>ol{margin:5px 0；}.product>ol>ol>li{padding:2px 0；颜色：黑色；}.product>button{边框：0；边距：25px 0；背景色：dee21e；字体重量：400；字体系列：oswald；宽度：120px；高度：30px；}。产品>按钮：悬停{背景色：白色；过渡：背景色1s；}@media（最大宽度：800px）{定价{弯曲方向：列；}。产品{最大宽度：300px；宽度：100%；边距：0自动；边距底部：10px；}
阿凡蒂西海岸酒店
每月15元
到西海岸旅游，价格更便宜
同侧眼线
洛雷姆·伊普苏姆·多洛
同侧眼线
了解更多
越野
每月20元
通过CrossCountry，让您的火车旅行更上一层楼
同侧眼线
洛雷姆·伊普苏姆·多洛
同侧眼线
了解更多
GWR
每月25元
使用GWR到欧洲旅行更便宜
对东海岸很好
洛雷姆·伊普苏姆·多洛
同侧眼线
了解更多

如果您使用以下内容更新CSS，则看起来您正在浮动

列表上的li项，这应该可以解决您的问题

从

中删除填充，并正确对齐列表项

.product > ol {
  padding: 0;
}

.product > ol > li {
  padding: 2px 0;
  color: black;
  float: none;
  display: inline-block;
}

---

您在

li

元素上设置了，这意味着对齐在某些屏幕尺寸上不起作用。请设置这些属性以修复对齐

.product > ol {
    margin: 5px 0;
    padding: 0;
    width: 90%;
}

li {
    width: 100%;
}

---

.product>ol{padding left:0；}

？