Unexplained right margin when page is not full screen - Nuxt/Tailwinds

Question

I'm trying to make a simple resume page using Nuxt, Vue3, and TailwindCSS. When my browser is full screen everything looks fine and everything works fine. However, if I see anything other than full screen, the right side of the page in the main part of the app is blank for no reason. (please ignore the terrible design, it's still a work in progress)

As you can see below, the element has a margin on the right side, but it shouldn't, and it doesn't even show up in the calculated layout. I didn't add custom CSS, so I just used the default Tailwind provided classes, which as far as I know should not have a right margin.

This is the parent element, and as you can see, it has no padding or margins that would affect the child elements.

This is my default.vue with the "content" element inserted (in the tag)

<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>

Answer 1

Container classes in Tailwind do not automatically apply any horizontal padding or self-centering. Adding the mx-auto class (setting margin-left and margin-right to auto) to the first div will solve the problem.