I'm trying to horizontally align CSS cards

Question

I am trying to make my css cards align right next to each other, I have tried inline-block and float right but still a nothing.

    .card1 {
        color: white;
        background-image: ;
        background-size: cover;
        padding: 10rem 0 0;
        margin: 30px;
        max-width: 35ch;
        border-radius: 20px;
        overflow: hidden;
        transition: transform 500ms ease, box-shadow 400ms;
    }

    .card2 {
        color: white;
        background-image: url(./images/osoandme.jpg);
        background-size: cover;
        padding: 10rem 0 0;
        margin: 30px;
        max-width: 35ch;
        border-radius: 20px;
        overflow: hidden;
        transition: transform 500ms ease, box-shadow 400ms;
    }

here is the html code, I tried flex box and wrap but still nothing they are still vertically aligned.

<div class="card1">
        <div class="card-content1">
            <h2 class="card-title1">Portfolio projects</h2>
            <p class="card-body1"></p>    
            <a href="#" class="button1">Projects</a>
        </div>
    </div>

    <div class="card2">
        <div class="card-content2">
            <h2 class="card-title2"> About me</h2>
            <p class="card-body2"></p>
            <a href="" class="button2">About me</a>
        </div>
    </div>

Hi, welcome to Stack Overflow! You'll have better luck with CSS questions if you include the HTML as well. That said you may want to look into CSS Flexbox, it will probably answer your question. — JHeth, Jun 30 '22 at 23:31
Can you provide a summary of the HTML you're using? Usually it's simplest to add a style on the parent container (e.g. `display: flex`) to make the cards sit next to each other. — Matt Ryall, Jun 30 '22 at 23:31
In addition to @MattRyall answer, here a recent [Codepen](https://codepen.io/renevanderlende/pen/abqpvjE?editors=1100) I created showing a base, responsive Flexbox row of cards you can study and use to your own avail. Also check out the *hover Bonus* in the remainder of the CSS. It's commented, so I should be fairly self-explanatory... — Rene van der Lende, Jul 01 '22 at 00:24

score 1 · Answer 1 · answered Jun 30 '22 at 23:35

It's probably easiest to wrap a container around the cards and use a flexbox layout. Something like this should work, in addition to what you have above:

.card-container {
   display: flex;
}

With HTML like this:

<div class="card-container">
    <div class="card1">...</div>
    <div class="card2">...</div>
</div>

By default, flex containers align their child elements along a row, which is probably what you want for cards.

If you want your cards to wrap over multiple lines rather than shrinking, add flex-wrap: wrap to the container styles.

I'm trying to horizontally align CSS cards

1 Answers1