alignment issue in media query - html

Question

So am trying to align these cards I made using flexbox at a smaller screen size using media query but for some reason am having a bit of trouble aligning the items at the center of the screen when it shrinks down to match the media query am wondering why this occurs. I tried aligning them to the center but it doesnt work.
<section class="bg-lightcareml container">
<div class="container-section">
<h2 class="prod-items">Our Products</h2>
<div class="card-items">
<div class="card">
<img src="blackbird.jpg" alt="">
<div class="card-text">
<h2>CyberWare</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum perferendis iure asperiores
dicta quis vel fugiat, soluta nam laboriosam.
</p>
</div>
</div>
<div class="card">
<img src="blackbird.jpg" alt="">
<div class="card-text">
<h2>CyberWare</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint tempore doloremque vero
placeat officiis eaque nisi velit rerum dolorums.</p>
</div>
</div>
<div class="card">
<img src="blackbird.jpg" alt="">
<div class="card-text">
<h2>CyberWare</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis nulla numquam in
provident deserunt! Cumque excepturi delectus
</p>
</div>
</div>
</div>
</div>
</section>
:root {
--clr-pr-200: #fceded;
--clr-pr-300: #bceeff;
--clr-pr-400: #0c0d0d;
--clr-pr-dr-: #ded9d9;
--clr-ctrl-100: #ffffff;
--clr-ntrl-900: #222C2A;
--ff-pr: 'Times New Roman', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.2%;
font-family: Roboto, Arial, Helvetica, sans-serif;
}
body {
font-weight: 400;
font-size: 1.3175rem;
line-height: 1.6;
}
.bg-lightblue {
background-color: var(--clr-pr-300);
height: 12vh;
}
.container {
margin-inline: auto;
width: min(95%, 210rem);
}
/*card-section*/
.bg-lightcareml {
background-color: var(--clr-pr-400);
}
.container-section {
margin-top: 3rem;
min-height: 820px;
max-width: 100%;
margin-bottom: 4rem;
padding: 0.6rem;
}
.container-section>.prod-items {
text-align: center;
font-size: x-large;
font-family: var(--ff-pr);
}
.prod-items {
padding: 1.8rem 0 0 0;
color: var(--clr-pr-200);
}
.card-items {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2.5rem;
}
.card {
display: flex;
flex: 0 1 200px;
flex-direction: column;
}
.card .card-text {
display: flex;
flex-direction: column;
}
.card-text {
background: var(--clr-ctrl-100);
padding: 1.2rem;
margin-top: -6px;
}
#media (max-width:35rem) {
.container-section {
padding: 5rem 0;
display: flex;
flex-direction: row;
justify-content: center;
}
.card-items {
display: flex;
flex-direction: column;
margin-top: 1.1rem;
max-width: 200px;
}
}
h2,
p {
line-height: 1.4;
font-size: 1.666rem;
font-weight: 500;
}
h2 {
font-weight: bold;
font-size: 1.76rem;
}
.card-items h2 {
text-align: center;
}
.card-items p {
text-align: center;
max-width: 930px
}
.card img {
max-width: 300px;
aspect-ratio: 1.3 / 1;
width: 100%;
}

Answer 1

Will this help? I don't know how you wanted it to look, but I think I think it has a better base you can build on.
:root {
--clr-pr-200: #fceded;
--clr-pr-300: #bceeff;
--clr-pr-400: #0c0d0d;
--clr-pr-dr-: #ded9d9;
--clr-ctrl-100: #ffffff;
--clr-ntrl-900: #222C2A;
--ff-pr: 'Times New Roman', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.2%;
font-family: Roboto, Arial, Helvetica, sans-serif;
}
body {
font-weight: 400;
font-size: 1.3175rem;
line-height: 1.6;
}
.bg-lightblue {
background-color: var(--clr-pr-300);
height: 12vh;
}
.container {
margin-inline: auto;
width: min(95%, 210rem);
}
/*card-section*/
.bg-lightcareml {
background-color: var(--clr-pr-400);
}
.container-section {
margin-top: 3rem;
min-height: 820px;
max-width: 100%;
margin-bottom: 4rem;
padding: 0.6rem;
}
.container-section>.prod-items {
text-align: center;
font-size: x-large;
font-family: var(--ff-pr);
}
.prod-items {
padding: 1.8rem 0 0 0;
color: var(--clr-pr-200);
}
.card-items {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card {
display: flex;
flex-direction: column;
width: 300px;
}
.card .card-text {
display: flex;
flex-direction: column;
}
.card-text {
background: var(--clr-ctrl-100);
padding: 1.2rem;
margin-top: -6px;
}
#media screen and (min-width: 700px) {
.card-items {
flex-direction: row;
}
.card {
width: auto;
margin: 0 10px;
}
}
<!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="./index.css" />
<title>Document</title>
</head>
<body>
<section class="bg-lightcareml container">
<div class="container-section">
<h2 class="prod-items">Our Products</h2>
<div class="card-items">
<div class="card">
<img src="blackbird.jpg" alt="">
<div class="card-text">
<h2>CyberWare</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum perferendis iure asperiores
dicta quis vel fugiat, soluta nam laboriosam.
</p>
</div>
</div>
<div class="card">
<img src="blackbird.jpg" alt="">
<div class="card-text">
<h2>CyberWare</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint tempore doloremque vero
placeat officiis eaque nisi velit rerum dolorums.</p>
</div>
</div>
<div class="card">
<img src="blackbird.jpg" alt="">
<div class="card-text">
<h2>CyberWare</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis nulla numquam in
provident deserunt! Cumque excepturi delectus
</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

Answer 2

You just have to make 2 changes when on mobile
#media (max-width: 35rem)
.container-section {
flex-direction: column;
align-items: center;
}
and it would be ok