我对超文本标记语言是个新手，我一直在try 为我的朋友创建一个网站，在这个网站上我制作卡片来显示信息.因为我要为多个部分制作多张卡片，所以我想将不同部分中的所有卡片对齐，但我一直在这样做时遇到麻烦.
首先，我try 了内联块，因为我猜测所有加在一起的元素都是一个块，但结果什么都没有发生.下一步，也是最后一步，我试着创建一张表，并在表中列出卡片，但同样不起作用.它在一定程度上做到了，但其他卡片被缩小了，文本挂在外面.能帮我个忙吗？
* {
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>$0.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>$0.00 USD</p>
</div>
</div>
</td>
</tr>
</section>
</section>
</table>
</main>
</body>