Mi solución para esta situación sería:
CSS .encabezado { display: flex; align-items: center; justify-content: space-between; }
Esto ubicaría el logo al lado izquierdo y el menú al lado derecho.
Si se desea que el menú quede también en alineación horizontal se adiciona:
.menu { display: flex; }
¡Hola Juan!
Gracias por compartir tu solución con nosotros. En cuanto a tu pregunta, agregar espacios con Flexbox es muy sencillo. La propiedad "justify-content" es la que te permite distribuir el espacio disponible entre los elementos de tu contenedor. En tu caso, ya estás utilizando "justify-content: space-between" para separar el logo y el menú a los extremos del contenedor.
Si deseas agregar un espacio adicional entre los elementos, puedes utilizar la propiedad "margin" en los elementos que deseas separar. Por ejemplo, si deseas agregar un espacio entre el logo y el menú, puedes agregar un margen derecho al logo y un margen izquierdo al menú.
Algo así:
.logo { margin-right: 10px; }
.menu { margin-left: 10px; }
Recuerda que puedes ajustar el valor del margen según tus necesidades. Espero que esta respuesta te haya sido útil. ¡Buenos estudios!