Unerklärlicher rechter Rand, wenn die Seite nicht im Vollbildmodus angezeigt wird – Nuxt/Tailwinds

Question

Ich versuche, mit Nuxt, Vue3 und TailwindCSS eine einfache Lebenslaufseite zu erstellen. Wenn mein Browser im Vollbildmodus ist, sieht alles gut aus und alles funktioniert gut. Wenn ich jedoch etwas anderes als den Vollbildmodus sehe, ist die rechte Seite der Seite im Hauptteil der App ohne Grund leer. (Bitte ignorieren Sie das schreckliche Design, es ist noch in Arbeit)

Wie Sie unten sehen können, hat das Element einen Rand auf der rechten Seite, sollte aber nicht vorhanden sein und wird im berechneten Layout nicht einmal angezeigt. Ich habe kein benutzerdefiniertes CSS hinzugefügt, also habe ich einfach die von Tailwind bereitgestellten Standardklassen verwendet, die meines Wissens keinen rechten Rand haben sollten.

Dies ist das übergeordnete Element, und wie Sie sehen können, weist es keine Abstände oder Ränder auf, die sich auf die untergeordneten Elemente auswirken würden.

Dies ist mein default.vue mit dem eingefügten Element „content“ (im -Tag)

<Vorlage>
    <div class="container flex p-4 flex-col h-screen overflow-hidden bg-slate-200">
        <div class="pb-2 bg-gradient-to-r from-red-500 via-green-500 to-lila-500">
            <header class="bg-slate-200 pb-2">
                <nav>
                    <ul class="flex justify-end gap-5">
                        <NuxtLink to="skills" class="rounded-lg border-black border-solid border-2
                                p-3">
                            <li>Schlüsselkompetenzen und Interessen
                            </li>
                        </NuxtLink>
                        <NuxtLink to="education" class="rounded-lg border-black border-solid
                                Grenze-2 p-3">
                            <li>Bildung</li>
                        </NuxtLink>
                        <NuxtLink to="experience" class="rounded-lg border-black border-solid
                                Grenze-2 p-3">
                            <li>Erfahrung</li>
                        </NuxtLink>
                        <NuxtLink to="about" class="rounded-lg border-black border-solid
                                Grenze-2 p-3">
                            <li>Ein bisschen über mich</li>
                        </NuxtLink>
                    </ul>
                </nav>
            </header>
        </div>

        <Steckplatz />
    </div>
</template>

Answer 1

顺风中的容器类不会自动应用任何水平填充或自居中。将 mx-auto 类（将 margin-left 和 margin-right 设置为 auto）添加到第一个 div 将解决该问题。