我是一个对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;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- link rel="stylesheet" href="/Home/Home.css" -->
</head>
<body>
<header>
<nav>
<ul>
<li>
<h2>Shoppables</h2>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Settings</a></li>
<li></li>
<li>
<a href="#"><img src="/Home/Home-Images/search_FILL0_wght400_GRAD0_opsz24.png"></a>
</li>
<li>
<a href="#"><img src="/Home/Home-Images/shopping_cart_FILL0_wght400_GRAD0_opsz24.png"></a>
</li>
</ul>
</nav>
</header>
<main>
<table style="width: 100%;">
<tr>
<section class="Featured-Sect">
<h2 class="Featured-Header" style="margin: 32px;">Featured Products:</h2>
<td style="width: 100%;">
<div class="Fcard1">
<img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
<div class="FCcontainer1">
<h2><b>Placeholder</b></h2>
<p>rrreee.00 USD</p>
</div>
</div>
</td>
<td style="width: 100%;">
<div class="Fcard1">
<img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
<div class="FCcontainer1">
<h2><b>Placeholder</b></h2>
<p>rrreee.00 USD</p>
</div>
</div>
</td>
</tr>
</section>
</section>
</table>
</main>
</body>
尝试将它们放在一个 div class="input-group" 中：
<div class="input-group"> <td style="width: 100%;"> <div class="Fcard1"> <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%"> <div class="FCcontainer1"> <h2><b>Placeholder</b></h2> <p>rrreee.00 USD</p> </div> </div> </td> <td style="width: 100%;"> <div class="Fcard1"> <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%"> <div class="FCcontainer1"> <h2><b>Placeholder</b></h2> <p>rrreee.00 USD</p> </div> </div> </td></div>