我正在尝试使用 Nuxt、Vue3 和 TailwindCSS 制作一个简单的简历页面。当我的浏览器全屏时，一切看起来都很好，而且一切都很好。但是，如果我看到全屏之外的任何内容，则应用程序主体部分的页面右侧会无缘无故地留出空白。 （请忽略可怕的设计，它仍在进行中）

如下所示，元素的右侧有一个边距，但不应该有，而且它甚至没有显示在计算的布局中。我没有添加自定义 CSS，所以我只使用默认的 Tailwind 提供的类，据我所知，不应该有右侧边距。

这是父元素，正如您所看到的，它没有会影响子元素的填充或边距。

这是我的 default.vue，其中插入了“content”元素（在 标记中）

<template>
    <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-purple-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>Key Skills & Interests
                            </li>
                        </NuxtLink>
                        <NuxtLink to="education" class="rounded-lg border-black border-solid
                                border-2 p-3">
                            <li>Education</li>
                        </NuxtLink>
                        <NuxtLink to="experience" class="rounded-lg border-black border-solid
                                border-2 p-3">
                            <li>Experience</li>
                        </NuxtLink>
                        <NuxtLink to="about" class="rounded-lg border-black border-solid
                                border-2 p-3">
                            <li>A Little Bit About Me</li>
                        </NuxtLink>
                    </ul>
                </nav>
            </header>
        </div>

        <slot />
    </div>
</template>