I am trying to make the page content cover the full screen but when i change the size of the browser to see how the content will be in other screen resolution i see that there is white space right the content that i need to scroll to the right to see

When i am trying to select the white space to inspect it It shows that it is HTML
this is the css code.

body{
    box-sizing: border-box;
    margin: 0;
}
html{
    margin: 0;
    box-sizing: border-box;
}
.landing{
    background-image: url('../../images/landing.jpg');
    background-size: cover;
    min-height: 100vh;
    width: 100vw;
    position: relative;
}
.overlay{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
}

and this is the HTML code for the section ( i tried to add more sections but the same problem happened )

        <section className='landing'>
            <div className='overlay'>
                <Navbar/>
                <MainBody/>
            </div>
        </section>

And this is the code of the other components (nav bar)

        <div className="border-b h-20 border-slate-300 z-2 w-3/5  translate-x-1/3">
            <img className='translate-y-5 h-10' src={logo}/>
            <ul className='list-none flex justify-end text-white -translate-y-2'>
                <li className='me-6 cursor-pointer hover:text-sky-400 hover:border-b-4 h-12 hover:border-sky-400'><button>Home</button></li>
                <li className='me-6 cursor-pointer hover:text-sky-400 hover:border-b-4 h-12 hover:border-sky-400'><button>Services</button></li>
                <li className='me-6 cursor-pointer hover:text-sky-400 hover:border-b-4 h-12 hover:border-sky-400'><button>Portfolio</button></li>
                <li className='me-6 cursor-pointer hover:text-sky-400 hover:border-b-4 h-12 hover:border-sky-400'><button>About</button></li>
                <li className='me-6 cursor-pointer hover:text-sky-400 hover:border-b-4 h-12 hover:border-sky-400'><button>Pricing</button></li>
                <li className='me-10 cursor-pointer hover:text-sky-400 hover:border-b-4 h-12 hover:border-sky-400'><button>Contant</button></li>
                <li className="after:block click: after:w-2 after:h-8 after:-translate-y-8 after:-translate-x-5 after:border-e after:border-white">
                <button><FontAwesomeIcon className='h-6' icon={faMagnifyingGlass }/></button>
                </li>
            </ul>
        </div>

Mainbody of the section

<div className="bg-cyan-800 translate-y-52 max-w-5xl min-h-80 bg-opacity-80 text-white ">
                <h1 className="translate-y-10 translate-x-1/2 me-20 text-3xl">Hello World!</h1>
                <h2 className="translate-y-14 translate-x-1/2 me-20 text-3xl">We Are Kasper We Make Art.</h2>
                <p className="translate-y-20 translate-x-2/3 ms-32 w-2/4">Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam. 
                Accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt.</p>
            </div>