Hi everyone flex-direction don't work and made display flex

[magic1]

<section class="cards" id="services">
        <h2 class="title"> Services </h2>
        <div class="content">
            <div class="card">
                <div class="icon">
                    <i class="fa-regular fa-pen-nib"></i>
                </div>
            <div class="info">
            <h3>script writing </h3>
            <p> writing down the movement, actions, expression and dialogue of the characters in screenplay </p>
            </div>
            </div>
                <div class="card">
                    <div class="icon">
                    <i class="fa-regular fa-pen-nib"></i>
                    </div>
                <div class="info">
                <h3>script writing </h3>
                <p> writing down the movement, actions </p>
                </div>
                </div>
        </div>
    </section>
```css file
.title{
    color:black;
    font-size: 2.1em;
    font-weight: 500;
    justify-content: center;
    display: flex;
    margin-bottom: 30px;
}   
.content{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.card{
    background-color: cadetblue;
    width: 20em;
    border-radius: 15px;
    padding: 30px;
    margin: 30px;
    box-shadow: 0 5px 25px rgba(1 1 1 / 50%);
    transition: 0.7s ease;

[Cody_Biggs]

You’re going to need provide a lot more. Just giving code without any explanation is not going to get you a lot of responses. Do you you have a codepen so we can see the code in action? What are you trying to accomplish? Maybe there is a better way we could help you in trying to accomplish what you want.

[lasjorg]

Seems to work just fine.

Also, row is the default direction so there is not going to be any change to the flex direction by setting it to row (unless it is overwriting a style you haven’t posted).

Tell us what you are expecting to happen and what is happening instead.

[magic1]

i want to make like the pic but i get the cards above each other thanks

[magic1]

@magic1

i want to make like the pic but i get the cards above each other thanks

[lasjorg]

With the CSS you have now, the cards are side by side until there is no room then they wrap and will be stacked.

[magic1]

come with me like in the pic i don’t know why thanks

[lasjorg]

What screen width are you at in that picture?

The flex-wrap is going to stack the two cards like that when there is no room for them to be side by side. So if you are at a low screen width (like mobile) or if you have put a max-width on either .content or .cards they may not have the room they need to sit side by side.

Other than that the CSS you posted isn’t the issue so you will have to post all of it if it isn’t working for you.