我正在考虑对齐引导卡并使它们响应。我把它们放在中间，但是它们重叠了，我不确定哪里出错了。就好像它都粘在左边。这是为电子邮件开发，宽度的最大为680px。
任何帮助将非常感激!
/** {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
*/
.email-background{
background-color: lightgrey;
font-family: sans-serif;
padding: 20px 5px 50px 5px;
width: 100%;
}
.email-container{
background-color: #ffff;
max-width: 680px;
margin: 0 auto;
padding-bottom: 40px;
border-radius: 15px;
padding-top: 25px;
}
/*
.features .smaller-text{
font-size: smaller;
display: inline-block;
}
*/
.price{
color: turquoise;
}
/*
.icon-case{
height: 1em;
width: 1em;
float: left;
}
*/
.view-btn{
background-color: #0fbd9a;
color: #fff;
padding: 15px 20px;
text-decoration: none;
border-radius: 15px;
float: right;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.email-column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.email-row {
margin: 0 -5px;
padding-top: 25px;
}
/* Clear floats after the columns */
.email-row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 680px) {
.email-column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 26px;
text-align: left;
background-color: #f1f1f1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>SkyScanner Test</title>
</head>
<body>
<div class="email-background">
<div class="email-container">
<p class="car-titles"><strong>Check out these sweet rides</strong></p>
<div class="email-row">
<div class="email-column">
<div class="card" style="width: 18rem;">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 1</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
</div>
</div>
</div>
<div class="email-column">
<div class="card" style="width: 18rem;">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 2</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
</div>
</div>
</div>
</div>
<div class="email-row">
<div class="email-column">
<div class="card" style="width: 18rem;">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 3</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
</div>
</div>
</div>
<div class="email-column">
<div class="card" style="width: 18rem;">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 4</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>你有一个固定的列宽度为25%，但然后你告诉卡片是18rem (inline)。去掉列宽，在实际的卡片类中设置卡片的大小，而不是内联。
我不想重写你的整个项目，但我建议查看bootstrap flex容器使用浮动(因此粘在左边)，这样你就可以让一切更好地排列，有更多的控制，而不必担心元素移动时，屏幕大小的变化
https://getbootstrap.com/docs/5.0/utilities/flex/
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.email-background {
background-color: lightgrey;
font-family: sans-serif;
padding: 20px 5px 50px 5px;
width: 100%;
}
.email-container {
background-color: #ffff;
max-width: 680px;
margin: 0 auto;
padding-bottom: 40px;
border-radius: 15px;
padding-top: 25px;
}
/*
.features .smaller-text{
font-size: smaller;
display: inline-block;
}
*/
.price {
color: turquoise;
}
/*
.icon-case{
height: 1em;
width: 1em;
float: left;
}
*/
.view-btn {
background-color: #0fbd9a;
color: #fff;
padding: 15px 20px;
text-decoration: none;
border-radius: 15px;
float: right;
}
/* Float four columns side by side */
.email-column {
float: left;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.email-row {
margin: 0 -5px;
padding-top: 25px;
}
/* Clear floats after the columns */
.email-row::after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 680px) {
.email-column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 26px;
text-align: left;
background-color: #f1f1f1;
width: 18rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>SkyScanner Test</title>
</head>
<body>
<div class="email-background">
<div class="email-container">
<p class="car-titles"><strong>Check out these sweet rides</strong></p>
<div class="email-row">
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 1</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
</div>
</div>
</div>
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 2</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
</div>
</div>
</div>
</div>
<div class="email-row">
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 3</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
</div>
</div>
</div>
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 4</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>