Ayuda con diseño responsivo

estoy haciendo un diseño responsivo pero en tipo web si toma las características que necesito, pero cuando pasa a 480 px pierde todo, fuente letra, imágenes se pegan a la izquierda



@media ( min-width:480px){
.argumento{
font-family: 'arial';
font-family: var(--fuenteprincipal);
text-decoration-color: white;
text-align: center;
text-align: justify;
padding-right: 15rem;
line-height: 25pt;
padding-top: -5rem;
text-decoration: white;
text-size-adjust: 2rem;
font-size: 26px;
text-indent: 10%;
padding-left: 15rem;
}
}

@media all and (min-width:480px){
.barra1{

max-width: 100%;
padding: 0rem 4rem;
padding-bottom: 0;
padding-top: 7.5rem;
margin:0 auto;
position: relative;
}
.barra1 .nav1{
display: grid;
grid-template-columns: repeat(4, 2fr);
grid-column-gap: 5rem;
}
.barra1 .nav1 a{
font-family: var(--fuenteprincipal);
font-size: 4rem;
color: white;
vertical-align:middle;
object-fit: cover;
}
}
 
Aque lo quieres adaptar. A movil tablet...
Para table es:



Código :

@media screen and (max-width:768px){
//code
}



y para movil:


Código :

@media screen and (max-width:600px){
//code
}




P.D: Recomiendo que especifiques muchisimos más para que te podamos ayudar (tu html y css, a donde lo quieres adaptar, especificamente donde te sale el error)

 
Hola, gracias por el apoyo, cambiare el codigo para saber si funciona, el tema es que lo hice sin la intencion de volverlo responsivo, por lo tanto agregue una serie de cosas especificas en el texto, como interlineados cambio de fuentes y de mas, al volverlo responsivo, perdio todas esas especificaciones, tambien la galeria de imagenes que cree dentro del grid se pega a la izquierda tampoco toma los atributos para que se muestre centrado el <div>
 
Arriba