Tengo un div con algo de texto dentro de mi contenedor principal div y un segundo div con un logo animado. Quiero colocar el primer div (el que tiene el texto adentro) al principio de la página (que lo he logrado sin problemas) y el segundo div con el logo adentro al final de la página (siempre en horizontal por supuesto) . No puedo alinear correctamente el segundo div y debido a su tamaño (700 px) toma más ancho y sale de la página.
* { margin: 0; padding: 0; } body, html { height: 100%; margin: 0; min-height: 100% !important; background: linear-gradient(30deg, #000000, #053254); } .programmer-logo { height: 700px; animation: logo-anim infinite 1s alternate-reverse; } .programmer-logo-container { display: flex; } .programmer-logo-div { color: white; position: absolute; top: 50%; transform: translate(100%, -50%); } .title { text-align: start; margin-left: 3%; color: white; position: absolute; top: 50%; transform: translateY(-50%); } .name-title { font-size: 55px; } .hello-title { font-size: 50px; } .desc-title { font-size: 30px; margin-top: 5px; color: darkgray; } .App { display: flex; flex-direction: column; height: 100%; min-height: 100% !important; } .App-header { min-height: 100%; height: 100%; height: max-content; } @keyframes logo-anim { from { transform: translateY(0px); } to { transform: translateY(20px); } } <div className="App"> <div className='content-container'> <div className='title'> <p className='hello-title'>Hello, i'm </p> <h1 className='name-title'>George Sepetadelhs</h1> <p className='desc-title'>Mobile and game developer</p> </div> <div className='programmer-logo-container'> <div className='programmer-logo-div'> <img className='programmer-logo' src={programmer_icon} /> </div> </div> </div> </div>Creo que deberías usar un contenedor para este. También considere establecer un límite de tamaño y algunos puntos de interrupción para un sitio más receptivo
Me di cuenta de su problema en la posición de uso de CSS. Hice cambios en tu código CSS:
* { margin: 0; padding: 0; } body, html { height: 100%; margin: 0; min-height: 100% !important; background: linear-gradient(30deg, #000000 ,#053254); } .programmer-logo { height: 700px; animation: logo-anim infinite 1s alternate-reverse; } /*.programmer-logo-container { display: flex; }*/ .content-container{ width: 100%; position: relative; display: flex; justify-content: space-between; } .programmer-logo-div { color: white; /*position: absolute;*/ /*top: 50%;*/ /*transform: translate(100%, -50%);*/ } .title { text-align: start; margin-left: 3%; color: white; /*position: absolute;*/ /*top: 50%;*/ /*transform: translateY(-50%);*/ } .name-title { font-size: 55px; } .hello-title { font-size: 50px; } .desc-title { font-size: 30px; margin-top: 5px; color: darkgray; } /*.App { display: flex; flex-direction: column; height: 100%; min-height: 100% !important; }*/ .App-header { min-height: 100%; height: 100%; height: max-content; } @keyframes logo-anim { from { transform: translateY(0px); } to { transform: translateY(20px); } }Espero que esto ayude