Hola Valery,

Por lo que veo en tu código, estás intentando centrar el texto dentro de tus elementos .box con display: flex; y align-items: center;. Sin embargo, parece que el texto no está centrado como esperabas.

El problema puede ser que estás usando flex-direction: row; en tus elementos .box. Esto significa que align-items: center; intentará centrar el contenido a lo largo del eje transversal, que en este caso es vertical debido a flex-direction: row;. Pero como la altura de tus elementos .box es de 50px y también estás usando un padding de 50px, el espacio disponible para tu texto es muy limitado, y por eso puede que no se vea centrado.

Si quieres centrar el texto tanto vertical como horizontalmente, puedes usar align-items: center; para el eje transversal y justify-content: center; para el eje principal. Además, te recomendaría que ajustes la altura y el padding de tus elementos .box para asegurarte de que el texto tiene suficiente espacio para centrarse. Aquí te dejo un ejemplo de cómo podrías hacerlo:

.box {
    font: message-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px; /* Ajusta esto según tus necesidades */
    width: 100px; /* Ajusta esto según tus necesidades */
    padding: 10px; /* Ajusta esto según tus necesidades */
    background-color: green;
    color: aliceblue;
}

Espero que esto te ayude a resolver tu problema. Recuerda que los valores que te he dado son solo un ejemplo, y deberías ajustarlos según tus propias necesidades.

Para lograr compartir tu código de manera apropiada puedes compartir haciendo clic en este botón y colocando tu código entre los acentos:

¡Saludos!