Questions & Answers

SOLVED

I've created a website and there's this white overflow on the right hand side when I make the page responsive that I can't explain. This seems to get smaller when I scroll down the page further.

Any help would be appreciated! None of the elements appear to be overflowing into the column.

The navbar also sometimes disappears.

Images of issue: White margin on responsive display White margin further down page

Hero component:

<template>
<div class=" overflow-hidden">
<div class="custom-shape-divider-top-1673798750 ">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
    </svg>
</div>
<section id="#Inicio" class=" h-screen w-full bg-texttonehover flex  flex-col justify-around  mx-auto z-0 relative top-0 left-0">
    <div class="py-8 px-4  mx-auto   text-left lg:py-16 lg:px-12">
        <h1 class="aos-item sm:text-7xl text-5xl  py-2 " data-aos="fade-right">Clases de <strong class=" ">Inglés</strong></h1> 
        <h1 class="aos-item sm:text-7xl text-5xl  py-2 " data-aos="fade-right">Para <TransitionRoot
            appear
        :show="isShowing"
        as="template"
        enter="transform transition duration-[500ms]"
        enter-from="opacity-0 rotate-[-120deg] scale-50"
        enter-to="opacity-100 rotate-0 scale-100"
        leave="transform duration-500 transition ease-in-out"
        leave-from="opacity-100 rotate-0 scale-100 "
        leave-to="opacity-0 scale-95"><strong class="" > {{ randomWord }}</strong>
        </TransitionRoot></h1>
        <h2 class="sm:text-2xl text-lg  py-2 aos-item " data-aos="fade-right">¡Aprende Inglés Cuándo Quieras!</h2>
        <div class="flex flex-row justify-start space-x-8">
            <div class="aos-item " data-aos-anchor-placement="center-bottom"  data-aos="fade-right">
                <button class="shadow-2xl font-bold bg-gradient-to-r from-main to-highlight my-2 hover:scale-105 text-texttone rounded-md border-texttone p-3 border-5"><a href="#Programas">Nuestros Programas</a> </button>                
            </div>

        </div>
    </div>
    
</section>
<div class=" custom-shape-divider-bottom-1673798205">
    <svg  data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path  d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
</svg>
</div>

<style lang="scss" scoped>


.custom-shape-divider-bottom-1673798205 {
    width: 100%;
    overflow: hidden  ;
    
}

.custom-shape-divider-bottom-1673798205 svg {
    position: relative;
    display: block;
    width: 100%;
    height: 160px;
}

.custom-shape-divider-bottom-1673798205 .shape-fill {
    fill: #222626;
}
/** For tablet devices **/
@media (min-width: 768px)  {
    .custom-shape-divider-bottom-1673798205 svg {
        width: 100%;
        height: 242px;
    }
}
.custom-shape-divider-top-1673798750 {
    // position: absolute;
    // top: 0;
    // left: 0;
    // width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-1673798750 svg {
    position: relative;
    display: block;
    width: 138%;
    height: 190px;
}

.custom-shape-divider-top-1673798750 .shape-fill {
    fill: #222626;
}

/** For tablet devices **/
@media (min-width: 768px) {
    .custom-shape-divider-top-1673798750 svg {
        width: 138%;
        height: 215px;
    }
}
/** For Bigger Screens**/


</style>

Navbar component:

<template>
<header class="bg-fade1 w-full fixed top-0 z-50 overflow-hidden ">       
    <nav class="container px-5 py-6 mx-auto xl:flex xl:justify-between xl:items-center">
        <div class="flex items-center justify-between">
            <!-- Link Logo to Main Page -->

            <h1 class="font-bold text-2xl text-texttone text-transparent bg-clip-text bg-gradient-to-r from-main to-highlight">
              <a href="#" >
                InglésPalMundo
              </a>
            </h1>

            <!-- Mobile menu button -->
            <div @click="showMenu = !showMenu" class="flex xl:hidden">
                <button type="button" class="text-texttone hover:text-texttonehover focus:outline-none focus:text-texttonehover">
                    <svg viewBox="0 0 24 24" class="w-6 h-6 fill-texttone">
                        <path fill-rule="evenodd" 
                        d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                        ></path>
                    </svg>
                </button>
            </div>
        </div>
        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
        <ul :class="showMenu ? 'flex' : 'hidden'" class="flex-col mt-8 space-y-4 xl:flex xl:space-y-0 xl:flex-row xl:items-center xl:space-x-4 xl:mt-0">
          <li href="#" class="text-sm font-bold text-texttone hover:scale-105 hover:text-texttonehover hover:cursor-pointer">
            <a href="#">Inicio</a> 
          </li>
          <li   class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#SobreNosotros" >Sobre Nosotros</a> 
          </li>
          <li   class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#NuestrosProfesores" >Nuestros Profesores</a> 
          </li>
          <li   class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#Programas" >Programas</a> 
          </li>
          <li class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#ClasesPrivadas" >Clases Privadas</a> 

          </li>
          <li class="text-sm font-bold text-texttone hover:scale-105 hover:text-slate-300 hover:cursor-pointer">
            <a href="#Contactanos" >Contáctanos</a> 

          </li>
          <!-- <button class="bg-gradient-to-r from-main to-highlight hover:scale-105 text-texttone rounded-md border-texttone p-3 border-5 ">
            <strong>¡Reserva tu Leccion Ahora!</strong> 
        </button> -->
        </ul>
    
    </nav>

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">
    <div class=" flex  flex-col justify-center items-center px-6">
        <div></div>
        <h1 class="sm:text-5xl text-4xl text-texttone text-center py-2 aos-item" data-aos="fade-right">Personalizado a tus <strong class="">Deseos</strong></h1> 
        <h2 class="sm:text-3xl text-xl text-texttone py-2 text-center sm:mt-3 aos-item" data-aos="fade-up">¡Aprende inglés de manera <strong>eficiente</strong> y <strong>cómoda</strong> con InglésPalMundo! </h2>
        <h2 class="sm:text-xl text-lg text-texttone py-2 text-center sm:mt-3 aos-item" data-aos="fade-up">Ofrecemos <strong>clases individuales y grupales</strong> a través de la modalidad en línea con programas de <strong>inglés básico, intermedio, avanzado, de negocios y de ingenieros.</strong> </h2>
        <h2 class="sm:text-xl text-lg text-texttone py-2 text-center sm:mt-3 aos-item" data-aos="fade-up">Todos nuestros tutores son <strong>hablantes nativos de inglés</strong> y cuentan con el español como segunda lengua.</h2>
        <h2 class="sm:text-xl text-lg text-texttone py-2 text-center sm:mt-3 aos-item" data-aos="fade-up">¡Mejora tus habilidades de inglés hoy mismo con InglésPalMundo!</h2>

    </div>

    <div class="hidden sm:flex aos-item" data-aos="fade-left">
        <img class=" object-contain  rounded-lg border-4 sm:border-8 border-texttone scale-50 md:scale-75" src="../../assets/videocall.jpg" />
    </div>
    
</section>

I tried adding overflow-x:hidden; to the html in style .css. This seemed to fix the issue at full screen but not on smaller displays!