Html/Css flexbox problem

WhiteMars — Thu, 15 Aug 2024 14:34:12 +0000

Hi !
I've just joined dev.to, looking for some answers to my code because i'm a beginner in this world of coding lines.

I'm not succeeding to align my cards. So i wanted to know if someone could help me with my exercise project.

        <h1>Menus</h1>

            <img src="path/Img/kimchi.jpg" alt="Kimchi">

                <p>Le kimchi, un mets emblématique coréen, est une savoureuse fermentation de légumes épicés, apportant à chaque bouchée un équilibre unique de saveurs piquantes, salées et umami.</p>



           <img src="path/Img/kimchi.jpg" alt="Kimchi">

                <p>Le kimchi, un mets emblématique coréen, est une savoureuse fermentation de légumes épicés, apportant à chaque bouchée un équilibre unique de saveurs piquantes, salées et umami.</p>



            <img src="path/Img/kimchi.jpg" alt="Kimchi">

                <p>Le kimchi, un mets emblématique coréen, est une savoureuse fermentation de légumes épicés, apportant à chaque bouchée un équilibre unique de saveurs piquantes, salées et umami.</p>

menusection h1 {

display: flex;
flex-direction: column;
align-items: center;
font-size: 50px;
font-family: "WaffleSoft"; 
color: #BE4E2E;

}

.menusection {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
}

.menu {
width: 320px;
overflow: hidden;
border-radius: 8px;
box-shadow: 0px 0px 5px rgba(20, 20, 20, 0.25);
margin: 20px;
}

.menu img {
width: 100%;
height: auto;
object-fit: contain;
}

.menudescription p {
line-height: 1,5;
font-size: 14px;
padding: 16px 10px 10px;
}

REMINDER: Please be kind, i'm new

Enjoy your day !

DEV Community: WhiteMars

Html/Css flexbox problem

menusection h1 {