html CSS boostrap 5响应较大屏幕上的一些元素看起来不同

Question

我正在练习制作一个网页，我使用的是boostrap 5。我的网站已经对使用@media的移动设备做出了响应，但当我试图在更大的屏幕上看到我的网页时，一些分区-分区-行不合适，而另一些则保持完美。无论屏幕大小，我如何才能使整个列居中。

当它在我的分辨率上时，它看起来很完美在此处输入图像描述

但当我缩小时，它会向左移动在此处输入图像描述

HTML

<div class="contaier">
<div class="card">
<div class="row">
<div class="col-12 col-md-8">
<div class="circle"> </div>
<div class="col-6 col-md-4"></div>
<h1>TOKEN</h1>
</div>
<div class="content1">
<p>The token will be launched in phase 2, which will serve as a passive reward for each of our DIVERS and as a token for the metaverse economy that is being built for the third phase.</p>
</div>
<img src="http://luxtopia.org/wp-content/uploads/2022/02/haseowo.gif">
</div>
</div>
</div>
</div>

CSS

* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
text-decoration: none;
text-shadow: #000000 0px 0 14px;

} 

body{
background-image: url(http://luxtopia.org/wp-content/uploads/2022/03/ffinal.png);
height: 100%;
width: 100%;
background-size: auto;
background-position: bottom center;
font-family: 'Varela', sans-serif;
overflow-x: hidden ;
background-size: 100% 102.5%;
background-attachment: scroll;
background-repeat: no-repeat; 
resize: both;
color: var(--font-color);

}
.cards .container{
object-fit: contain;
display:inline-block;
width: 100%;
padding: 1% 15%;
}
.card{
position: relative;
bottom: 850px;
left:230px;
width: 400px;
height: 300px;
background:#335bb7;
border-radius: 100px;
display: flex;
align-items: center;
transition: 0.5s;
border-style: none;
}
.card h1{
position:absolute;
left: 148%;
font-size: 30px;
bottom: 50%;
}
.card2 h1{
position:absolute;
right: 115%;
font-size: 30px;
bottom: 50%;
}
.card3 h1{
position:absolute;
left: 93%;
font-size: 30px;
bottom: 50%;
}
.card4 h1{
position:relative;
right: 46%;
font-size: 30px;
top: 5%;
}
.card .circle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
}
.card .circle::before{
content:'';
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: #335bb7;
clip-path: circle(120px at center);
transition:0.05s;
display:hidden;
}
.card:hover .circle:before
{
background: #00fcf3;
clip-path: circle(400px at center);
height: 250px;
border-radius: 20px;
}
.card img{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
height: 250px;
width: 250px;
pointer-events: none;
transition:0.05s;
}
.card:hover img{
left: 2%;
top: 35%;
height: 400px;
width: 400px;
}
.card .content1
{
position: absolute;
width: 50%;
left: 10%;
padding:10px 0px 0px 20px;
transition: 0.5s;
opacity: 0;
visibility: hidden;

}
.card:hover .content1
{
left: 0;
opacity: 1;
visibility: visible;
left: 40%;
padding: 65px 20px;
}

感谢所有花时间阅读我帖子的人，我感谢任何形式的帮助："(

Answer 1

1. 您的第一个<div>类名中有一个拼写错误(contaier->container(。

2. 添加一些弹性属性：

   .card｛

   justify-content: center;
   

   }

您也可以使用引导程序类来代替：

<div class="card justify-content-center"></div>

这集中了卡片的子元素。在您的情况下：<div class="row">不确定你的行或列是问题所在，因为你只发布了一段代码。如果列的居中有问题，只需将这个引导类添加到相应的div:<div class="row justify-content-center">中