Actualmente estoy realizando mi Product Landing Page y tengo un pequeño problema a la hora de transformar mi página al tamaño móvil. Tengo 3 cajas con texto que se acoplan cuando el tamaño de la pantalla es pequeño y soy incapaz de solucionarlo. Supongo que es algo básico y simple pero he probado cambiando márgenes y paddings y no doy con la solución. ¿Alguien podria decirme que le falta a mi código?
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
Challenge: Build a Product Landing Page
Link to the challenge:
Hola! Bienvenido a la comunidad 
!
Hmmm, es que estás utilizando position: absolute, que en si no está mal, pero te dificulta el trabajo en lugar de ayudarte. Usa position: absolute solo si flex, float o grid no solucionan tu problema (por ejemplo, si quieres crear un pop-up o modal).
Ahora, si quieres arreglarlo usando position: absolute, lo que yo haría sería usar media queries para los distintos tamaños que planees soportar.
Por ejemplo, si se descuadra tu diseño en una pantalla de 500px (o menos), escribiría algo así:
@media screen and (max-width: 500px) {
article {
left: 10px;
}
/* y así sucesivamente */
}
Creo que sería mejor que aprendas a utilizar flex y rescribas lo que hiciste 
.