HTML - PROBLEMA - AJUSTAR WEB

@media only screen and (max-width: 600px) {

 /* Todo el código css para todas aquellas pantallas menores a 600px */

}

/* además en el css puedes probar a poner min-width y max-width */

html {

    font-size: 10px;

}

@media only screen and (max-width: 400px) {

    html {

        font-size: 9.411764705882353px;

    }

}

html, body {

    height: 100%;

}

body {

    background: #111111;

    font-family: "lora-regular", serif;

    font-size: 1.7rem;

    font-style: normal;

    font-weight: normal;

    line-height: 1.765;

    color: #757575;

    margin: 0;

    padding: 0;

}

:root{

 --Rojo: backgroundcolor: red;

}

html {

    font-size: 10px;

}

@media only screen and (max-width: 400px) {

/*Aqui tenias el cierre del media only.... */

*{

 margin: 0;

 padding: 0;

}

body {

   /* La altura se va adaptando al contenido de la página*/

    height: 100%;

}

body {

    background: #111111;

    font-family: "lora-regular", serif;

    font-size: 1.7rem;

    font-style: normal;

    font-weight: normal;

    line-height: 1.765;

    color: #757575;

   }

/*Todo el codigo debe estar dentro*/

}

body{

  width: 100vw;

}

body{

  overflow-x:hidden;

}