CSS - porque pasa esto me podrían ayudar porf

hola amigos, tengo una duda no se porque me pasa esto no se como explciarlo bien pero tratare:
en mi pantalla me aparece con un scroll lateral no se porque un espacio super largo en donde no ahi nungun elemto alguien me podria ayuda? dejo esta iamgen guia

Hola,

sin ver el código HTML ni los estilos CSS es difícil decirte exactamente lo que ocurre.
Viendo sólo la imagen, los scrolls y el fondo negro, parece que hay una regla css que establece el fondo negro y supongo que un ancho y alto de XXXX píxeles.

Un saludo!

body {
margin: 0px auto;
max-width: 100%;
background-color: black;

}

.header {
max-width: 100%;
max-height: 100%;
margin: 0 ;
}

.H1 {
display: grid;
justify-items: center;
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
font-family: 'Cabin Condensed', sans-serif;
}


.caja {
background-color: rgb(255, 255, 255);
height: 90rem;
}


.caja1 {
background-color: white;
}


.container {
display: block;
margin: 0;
background-color: white;
height: 20rem;
width: 30.5rem;
}

.container1 {
display: block;
margin: -20rem auto;
background-color: white;
height: 20rem;
width: 20rem;
}


.container2 {
display: block;
margin: -20rem 0 0 auto;
background-color: white;
height: 20rem;
width: 30.5rem;
}


.container3 {
display: grid;
background-color: white;
height: 20rem;
width: 100%;
margin: 0.5rem auto;
}

.container4 {
display: grid;
background-color: white;
height: 20rem;
width: 20rem;
}

.container5 {
display: grid;
background-color: white;
height: 20rem;
width: 20rem;
}




.img1 {
width: 100%;
height: 85%;
}

.img2 {
visibility: hidden;

}






@media (max-width: 375px) {
.img1 {
display: none;
}

.img2 {
visibility: visible;
max-width: 100%;
height: 80%;

}

.container{
max-width: 100%;
}

.container1{
max-width: 100%;
}

.container2{
max-width: 100%;
}


.container3{
max-width: 100%;
}
}



@media (max-width: 514px) {
.img1 {
display: none;
}
.header {
width: 8.9rem;
}

.img2 {
visibility: visible;
width: 8.9rem;
max-height: 30%;

}

.container{
width: 8.9rem;
height: 20rem;
}

.container1{
width: 8.9rem;
height: 20rem;
display: none;
}

.container2{
width: 8.9rem;
height: 20rem;
display: none;
}


.container3{
width: 8.9rem;
float: left;
}

.H1 {
display: grid;
justify-items: center;
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
font-family: 'Cabin Condensed', sans-serif;
margin-left: 60px;
font-size: 1.1rem;

}
}






@media (max-width: 540px) {
.img1 {
display: none;
}
.header {
width: 8.9rem;
}

.img2 {
visibility: visible;
width: 8.9rem;
max-height: 30%;

}

.container{
width: 8.9rem;
height: 20rem;
}

.container1{
width: 8.9rem;
height: 20rem;
}

.container2{
width: 8.9rem;
height: 20rem;
}


.container3{
width: 8.9rem;
float: left;
}

.H1 {
display: grid;
justify-items: center;
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
font-family: 'Cabin Condensed', sans-serif;
margin-left: 30px;
font-size: 1.1rem;
white-space: pre;
}
}



@media (max-width: 568px) {
.img1 {
display: none;
}
.header {
width: 8.9rem;
}

.img2 {
visibility: visible;
width: 8.9rem;
max-height: 30%;

}

.container{
width: 8.9rem;
height: 20rem;
}

.container1{
width: 8.9rem;
height: 20rem;
}

.container2{
width: 8.9rem;
height: 20rem;
}


.container3{
width: 8.9rem;
float: left;
}

.H1 {
display: grid;
justify-items: center;
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
font-family: 'Cabin Condensed', sans-serif;
margin-right: 421px;
font-size: 1.1rem;
}
}



@media (max-width: 600px) {
.img1 {
display: none;
}
.header {
width: 9.4rem;
}

.img2 {
visibility: visible;
width: 9.4rem;
max-height: 30%;

}

.container{
width: 9.4rem;
height: 20rem;
}

.container1{
width: 9.4rem;
height: 20rem;
}

.container2{
width: 9.4rem;
height: 20rem;
}


.container3{
width: 9.4rem;
float: left;
}

.H1 {
display: grid;
justify-items: center;
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
font-family: 'Cabin Condensed', sans-serif;
margin-right: 445px;
font-size: 1.1rem;
}
}




@media (max-width: 1326px) {


.header {
max-width: 100%;
}


.container{
max-width: 100%;
}

.container1{
max-width: 100%;
}

.container2{
max-width: 100%;
}


.container3{
max-width: 100%;
}
}


@media (max-width: 1296px) {


.header {
max-width: 100%;
}


.img1 {
max-width: 100%;
max-height: 80%;
}

.container{
max-width: 37%;
}

.container1{
max-width: 37%;
}

.container2{
max-width: 37%;
}


.container3{
max-width: 100%;
}
}




@media (max-width: 1270px) {


.header {
max-width: 100%;
}


.img1 {
max-width: 100%;
max-height: 80%;
}

.container{
max-width: 36%;
}

.container1{
max-width: 36%;
}

.container2{
max-width: 36%;
}


.container3{
max-width: 100%;
}
}




@media (max-width: 1160px) {


.header {
max-width: 100%;
}


.img1 {
max-width: 100%;
max-height: 80%;
}

.container{
max-width: 34%;
}

.container1{
max-width: 34%;
}

.container2{
max-width: 34%;
}


.container3{
max-width: 100%;
}
}





@media (max-width: 1032px) {


.header {
max-width: 100%;
}


.img1 {
max-width: 100%;
max-height: 80%;
}

.container{
max-width: 33%;
}

.container1{
max-width: 33%;
}

.container2{
max-width: 33%;
}


.container3{
max-width: 100%;
}
}



@media (max-width: 940px) {


.header {
max-width: 100%;
}


.img1 {
max-width: 100%;
max-height: 80%;
}

.container{
max-width: 32.5%;
max-height: 3%;
}

.container1{
max-width: 32.5%;
max-height: 3%;
}

.container2{
max-width: 32.5%;
max-height: 3%;
}


.container3{
max-width: 100%;

}
}

es bastantelargo, el max width del body lo puse para tratar de arreglarlo pero no me funciona así no lo tenga

sin html, no se sabe como esta armado. preferiblemente adjunta como archivos el css y el html, para no alargar el post.

salu2