CSSintroevergreen
Flexbox essentials
One-dimensional layout, mastered.
Flexbox lays children out along a single axis and shares the leftover space between them. Once you can name the main axis, justify-content and align-items stop being a guessing game.
Nav bar with space-between
HTML+CSS+JSintro Press Run to execute
justify-content: space-between puts all the free main-axis space between the two children, so the Chiron brand pins to the left edge and the link list pins to the right — the classic logo-left / menu-right bar. The nested .links is its own flex row, using gap: 18px to space the items without touching the outer alignment.