html CSS boostrap 5 responsive on larger screen some elements looks different - html

Question

i'm practicing making a web page and i was using boostrap 5. my website is already responsive for mobile devices using the #media but when i try to see my webpage on larger screen sizes some divs - sections - row are out of its place and others remain perfect on their place. How can i make the whole column be center no matter the screen size.
when it's on my resolution it looks perfect
enter image description here
but when i zoom out it moves to the left
enter image description here
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;
}
thank you all who took the time to read my post, i apreciate any kind of help :')

Answer 1

You have got a typo in your first <div> class-name (contaier -> container).
Add a few flex-attributes:
.card{
justify-content: center;
}
You can alternatively also use the bootstrap classes instead:
<div class="card justify-content-center"></div>
This centers the child-elements of card. In your case: <div class="row">
Not sure if your rows or columns are the problem, since you only posted a snippet of your code. If you have trouble with the centering of your columns, just add this bootstrap class to the respective div: <div class="row justify-content-center">