Alineación en flex

¡Hola Marlio!

Entiendo tu problema. Hay un pequeño error en tu código. En lugar de "align-item", deberías utilizar "align-items" para alinear los elementos hijos verticalmente dentro del contenedor flex. Aquí está el código corregido:

.cuadro--container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Corregido */
}

Con esta corrección, los elementos hijos deberían alinearse horizontalmente dentro del contenedor. Espero que esto resuelva tu problema.

¡Buena suerte con tu ejercicio y sigue practicando!

¡Saludos!

Yo organice el codigo y el texto para que se pareciera a la imagen asi;

• { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: "Jura", sans-serif; margin: 0 230px; background: linear-gradient(180deg, #154580 0%, #041833 100%); color: white; height: 100vh; width: 100vw; }

.titulo { margin: 12px 15px 30px 15px; top: 30px; left: 180px; font-size: 25px; font-weight: bold; text-decoration: underline 3px; text-underline-offset: 25px; }

.cuadros__container { display :flex; align-items: center; white-space: nowrap; overflow: scroll; gap:15px ;

}

.cuadros__item:nth-child(1), .cuadros__item:nth-child(3) { margin-top: 1px; }

.obra-titulo { border: 1px dotted white; padding: 10px; user-select: none; text-align: center; width: 275px; }