Hola Juan, espero que estés bien
Parece que estás trabajando con Flexbox para alinear elementos dentro de un contenedor. En la imagen que compartiste, el objetivo es alinear dos cuadrados (uno negro y otro rojo) en línea dentro de un contenedor gris, utilizando justify-content: space-between; para distribuir el espacio entre ellos.
Aquí está el código CSS que estás utilizando:
main {
display: flex;
justify-content: space-between;
}
Este código hace que los elementos hijos del contenedor main se distribuyan uniformemente, con el primer elemento alineado al principio y el último al final, dejando espacio entre ellos.
Si tienes alguna pregunta específica sobre cómo funciona Flexbox o necesitas ajustar algo más en tu diseño, no dudes en preguntar. Espero que esto aclare tus dudas sobre la alineación de los elementos.
¡Espero haber ayudado y buenos estudios!