I've been working on creating a webpage using Bootstrap 5, and I've managed to make it responsive for mobile devices using @media queries. However, I'm facing an issue where some of the divs, sections, and rows are not aligning properly when viewed on larger screens. How can I ensure that the columns are centered regardless of the screen size?
Everything looks perfect on my resolution view image here
but when I zoom out, it shifts to the left view image here
HTML
<div class="container">
<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;
...
Thank you to everyone who took the time to read my post, I appreciate any help :')