我有下面的代码和html（引导已启用）页面，它简单地显示了三个引导卡与图像的页面。
我想要
a）从左手边开始的空白处应包括在内。b.卡片应水平显示（一个接一个地横过屏幕），而不是垂直显示。
我试过各种东西，但都没有效果。有没有人能给一个初学者一个清晰的解释，解释如何实现这些事情。
全码
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<h1>Website</h1>
<h2>Site with multiple horizontal cards</h2>
<!-- card 1-->
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- card 2-->
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- card 3-->
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
小饰品
https://trinket.io/html/8fcb4c4f39？runmode=自动运行
当前显示
更新:
我明白，我可以重新开始，尝试实现这个结构中的一切
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
但是为了教学的目的，有没有一个简单的方法，只是添加到我必须达到的结果，从而教的原则，什么是正在做的。
Bootstrap有边距类m-5，例如，添加它，这是所有在任何类你想要的
