Unerklärlicher rechter Rand, wenn die Seite nicht im Vollbildmodus angezeigt wird – Nuxt/Tailwinds
<p>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)</p>
<p>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. </p>
<p>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.
</p>
<p>Dies ist mein <code>default.vue</code> mit dem eingefügten Element „content“ (im <code><slot //></code>-Tag)</ p>
<pre class="brush:html;toolbar:false;">
<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>
</pre></p>
