Alineamiento con display flex

Hola Yuliet, espero que estés bien

Para alinear los elementos verticalmente usando display: flex, necesitas cambiar la dirección del eje principal. Por defecto, flex-direction está configurado en row, lo que alinea los elementos en una fila horizontal. Para alinearlos verticalmente, debes establecer flex-direction: column.

Por lo tanto, la opción correcta es agregar la propiedad flex-direction: column al CSS de la clase .container. Esto hará que los elementos se dispongan uno debajo del otro en una columna.

Aquí tienes un ejemplo práctico de cómo se vería el CSS:

.container {
    margin: 20%;
    display: flex;
    flex-direction: column; /* cambia la dirección del eje principal a vertical */
    gap: 10px;
}

Espero que esto te ayude a resolver tu duda. ¡Bons estudos!