alignment issue in media query-CodePudding

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 >
    <div >
        <h2 >Our Products</h2>
        <div >



            <div >
                <img src="blackbird.jpg" alt="">
                <div >
                    <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 >
                <img src="blackbird.jpg" alt="">
                <div >
                    <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 >
                <img src="blackbird.jpg" alt="">

                <div >
                    <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%;


}

CodePudding user response：

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 >
        <div >
            <h2 >Our Products</h2>
            <div >
                <div >
                    <img src="blackbird.jpg" alt="">
                    <div >
                        <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 >
                    <img src="blackbird.jpg" alt="">
                    <div >
                        <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 >
                    <img src="blackbird.jpg" alt="">
                    <div >
                        <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>

CodePudding user response：

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