RESOLVED
There is a strange white overflow on the right side of my responsive website that appears and becomes smaller as I scroll down the page. I can't seem to figure out why this is happening. None of the elements are overflowing into that space.
I would appreciate any help! Also, sometimes the navbar disappears.
Here are some images of the issue: White margin on responsive display White margin further down the page
Hero component:
<template>
<div class=" overflow-hidden">
... (omitted for brevity)
<style lang="scss" scoped>
... (omitted for brevity)
</style>
Navbar component:
<template>
<header class="bg-fade1 w-full fixed top-0 z-50 overflow-hidden ">
... (omitted for brevity)
Information section component:
<template>
<section id="SobreNosotros" class="bg-fade1 px-8 flex-wrap-reverse md:flex-nowrap relative h-screen flex sm:flex-row justify-evenly items-center z-0">
... (omitted for brevity)
I attempted to solve the issue by adding overflow-x:hidden; to the html in the .css file. While this fixed the problem on full screens, it did not resolve the issue on smaller displays!