X overflow appearing on right hand side of page (Vue.js , Tailwind CSS)-CodePudding

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 >
<div >
    <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" ></path>
    </svg>
</div>
<section id="#Inicio" >
    <div >
        <h1  data-aos="fade-right">Clases de <strong >Inglés</strong></h1> 
        <h1  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  > {{ randomWord }}</strong>
        </TransitionRoot></h1>
        <h2  data-aos="fade-right">¡Aprende Inglés Cuándo Quieras!</h2>
        <div >
            <div  data-aos-anchor-placement="center-bottom"  data-aos="fade-right">
                <button ><a href="#Programas">Nuestros Programas</a> </button>                
            </div>

        </div>
    </div>
    
</section>
<div >
    <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" ></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 >       
    <nav >
        <div >
            <!-- Link Logo to Main Page -->

            <h1 >
              <a href="#" >
                InglésPalMundo
              </a>
            </h1>

            <!-- Mobile menu button -->
            <div @click="showMenu = !showMenu" >
                <button type="button" >
                    <svg viewBox="0 0 24 24" >
                        <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 : >
          <li href="#" >
            <a href="#">Inicio</a> 
          </li>
          <li   >
            <a href="#SobreNosotros" >Sobre Nosotros</a> 
          </li>
          <li   >
            <a href="#NuestrosProfesores" >Nuestros Profesores</a> 
          </li>
          <li   >
            <a href="#Programas" >Programas</a> 
          </li>
          <li >
            <a href="#ClasesPrivadas" >Clases Privadas</a> 

          </li>
          <li >
            <a href="#Contactanos" >Contáctanos</a> 

          </li>
          <!-- <button >
            <strong>¡Reserva tu Leccion Ahora!</strong> 
        </button> -->
        </ul>
    
    </nav>

Information section component:

<template>  
<section id="SobreNosotros" >
    <div >
        <div></div>
        <h1  data-aos="fade-right">Personalizado a tus <strong >Deseos</strong></h1> 
        <h2  data-aos="fade-up">¡Aprende inglés de manera <strong>eficiente</strong> y <strong>cómoda</strong> con InglésPalMundo! </h2>
        <h2  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  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  data-aos="fade-up">¡Mejora tus habilidades de inglés hoy mismo con InglésPalMundo!</h2>

    </div>

    <div  data-aos="fade-left">
        <img  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!

CodePudding user response：

SOLVED!

Added

html,body
{
    width: 100%;
    overflow-x: hidden; 
}

to style.css, was only added to the html before