我正在创建一个页面，该网站将显示所有的服务器，他已经加入了列表。
我想在一个盒子里展示每一个，我想让一排的盒子占据所有的空间，但是，它看起来并没有占据所有的空间，有些盒子被留在了右边。
下面是.vue文件的代码：

<template>
<div class="_container m-20">
    <div class="title text-5xl text-center">Your Servers</div>
    <br><br>
    <div class="cards flex flex-wrap">
        <div v-for="server in servers" :key="server.id" class="card w-96 py-4 px-8 rounded-lg my-20 ml-20 grow">
            <div class="flex justify-center md:justify-end -mt-16 flex-1">
                <img class="w-20 h-20 object-cover rounded-full server-icon" :src="'https://cdn.discordapp.com/icons/' + server.id + '/' + server.icon  + '.png'" v-if="server.icon" />
                <div class="w-20 h-20 object-cover rounded-full server-icon from-name text-2xl flex pt-1 items-center justify-center" v-else>{{server.name.split(" ").map(n => n[0].toUpperCase()).join("")}}</div>
            </div>
            <div>
                <h2 class="text-2xl font-semibold heading">{{server.name}}</h2>
            </div>
            <a :href="'/configure/'+ server.id ">
                <div class="flex justify-end mt-4">
                    <button class="font-medium name w-full rounded-lg p-4">Configure</button>
                </div>
            </a>
            <br>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import {
    ref
} from '@vue/reactivity';

export default {
    setup() {
        const servers = ref();

        (
            async () => {
                const res = await fetch("https://discord.com/api/users/@me/guilds", {
                    method: "GET",
                    headers: {
                        "Authorization": "Bearer " + window.localStorage.getItem("access_token")
                    }
                })

                const userGuilds = await res.json()

                servers.value = userGuilds

                console.log(userGuilds)
            }
        )()

        return {
            servers
        }
    },
};
</script>

<style scoped>
.server-icon {
    border: 3px solid #88C0D0;
}

.card {
    background-color: #3B4252;
    color: #D8DEE9;
}

.cards {
    flex-direction: row !important;
    flex-basis: 0 !important;
    flex-grow: 1 !important;
}

.heading {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 50px;
    font-family: "Comfortaa";
}

.name {
    background-color: #88C0D0;
    color: #2e3440;
    font-family: "Comfortaa";
}

._container {
    font-family: "Comfortaa";
}

.from-name {
    background-color: #3B4252;
}
</style>

字符串