我目前有以下HTML代码

<div class="cards-wrapper">

        <div class="card">
            <p>
                Lorem ipsum
            </p>
            <img src="../images/placeholder.jpg" width="500">
        </div>

        <div class="card">
            <p>
                Lorem ipsum
            </p>
            <img src="../images/placeholder.jpg" width="500">
        </div>

    </div>

字符串
以及这段css代码来沿着它

.cards-wrapper {
    display: flex;
    justify-content: center;
    width: 90vw;

    margin: 0 auto;
    padding: 1%;

    background-color: var(--colour-element-hover);
    border-radius: var(--bord-rad);

    box-shadow: var(--shadow);
}

.card {
    display: flex;
    justify-content: center;
    width: 100%;

    margin: 0 auto;
    padding: 1%;

    background-color: var(--colour-element-background);
    border-radius: var(--bord-rad);

    box-shadow: var(--shadow);
}

型
我的问题是，当我查看页面时，我的卡片div被放置在彼此旁边like in the image provided我想要的是每个卡片div被垂直放置在另一个之后，浅紫色围绕着它们
我已经尝试了很多东西，但我是相当新的html和css，所以我不知道该怎么办。