Marge droite inexpliquée lorsque la page n'est pas en plein écran - Nuxt/Tailwinds

Question

J'essaie de créer une page de CV simple en utilisant Nuxt, Vue3 et TailwindCSS. Lorsque mon navigateur est en plein écran, tout semble bien et tout fonctionne bien. Cependant, si je vois autre chose que le plein écran, le côté droit de la page dans la partie principale de l'application est vide sans raison. (veuillez ignorer le design épouvantable, c'est toujours un travail en cours)

Comme vous pouvez le voir ci-dessous, l'élément a une marge sur le côté droit, mais ce n'est pas le cas, et il n'apparaît même pas dans la mise en page calculée. Je n'ai pas ajouté de CSS personnalisé, j'ai donc simplement utilisé les classes fournies par défaut par Tailwind, qui, à ma connaissance, ne devraient pas avoir de marge droite.

Il s'agit de l'élément parent et, comme vous pouvez le constater, il n'a aucun remplissage ni marge qui affecteraient les éléments enfants.

Voici mon default.vue avec l'élément "content" inséré (dans la balise )

<modèle>
    <div class="container flex p-4 flex-col h-screen overflow-hidden bg-slate-200">
        <div class="pb-2 bg-gradient-to-r du-rouge-500 via-vert-500 au-violet-500">
            <header class="bg-slate-200 pb-2">
                <nav>
                    <ul class="flex justifier-fin écart-5">
                        <NuxtLink vers="compétences" class="bordure arrondie-lg-bordure noire-bordure solide-2
                                p-3">
                            <li>Compétences et intérêts clés
                            ≪/li>
                        </NuxtLink>
                        <NuxtLink vers="éducation" class="bordure arrondie-lg-bordure noire-solide
                                bordure-2 p-3">
                            <li>Éducation</li>
                        </NuxtLink>
                        <NuxtLink vers="expérience" class="bordure arrondie-lg-bordure noire-solide
                                bordure-2 p-3">
                            <li>Expérience</li>
                        </NuxtLink>
                        <NuxtLink vers="à propos" class="bordure arrondie-lg-bordure noire-solide
                                bordure-2 p-3">
                            <li>Un peu de moi</li>
                        </NuxtLink>
                    </ul>
                </nav>
            </en-tête>
        </div>

        <emplacement />
    </div>
</modèle>

Answer 1

Les classes de conteneurs dans Tailwind n'appliquent pas automatiquement de remplissage horizontal ni d'auto-centrage. L'ajout de la classe mx-auto (en définissant margin-left et margin-right sur auto) au premier div résoudra le problème.