<p>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) </p> <p>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. </p> <p>This is the parent element, and as you can see, it has no padding or margins that would affect the child elements. </p> <p>This is my <code>default.vue</code> with the "content" element inserted (in the <code><slot /></code> tag)</ p> <pre class="brush:html;toolbar:false;"> <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> </pre></p>