我是一个对HTML新手，我一直在尝试为我的朋友创建一个网站，在网站中我正在制作卡片来展示信息。由于我在不同的部分制作了多个卡片，我想要将所有的卡片在它们各自的部分中对齐，但是我一直遇到困难。

首先，我尝试了inline-block，因为我猜测所有的元素加起来应该是一个块，但结果什么都没有发生。接下来，我尝试创建一个表格，并在表格中列出卡片，但也没有成功。它部分地成功了，但其他的卡片被缩小了，文本也溢出了。我该如何修复它？

* { font-family: Arial, Helvetica, sans-serif; } body { background-color: #fafafa; color: rgb(32, 32, 32); margin: 0; } header { position: sticky; top: 0px; } nav { background-color: #fafafa; margin: 0; width: 100%; } ul { text-align: center; } li { display: inline-flex; text-align: center; } a { float: right; list-style-type: none; text-decoration: none; color: rgb(0, 0, 0); background-color: #fafafa; padding: 40px; } a:hover { float: right; list-style-type: none; text-decoration: none; transition-duration: 0.8s; font-size: 25px; } .Fcard1 { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; width: 16%; margin-left: 32px; } .Fcard1:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .FCcontainer1 { padding: 2px 16px; } .Fcard2 { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; width: 16%; margin-left: 32px; } .Fcard2:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .FCcontainer2 { padding: 2px 16px; }

     
  
  
 
 
 
Featured Products:
 
 
 
 
  
 
Placeholder
 
rrreee.00 USD
 
 
 
 
 
  
 
Placeholder
 
rrreee.00 USD