06 Explained solutions
Compare the reasoning, not just the final appearance. Other correct solutions can satisfy the same requirements.
1. Axes
With column, the main axis runs vertically, so justify-content distributes along that vertical axis. align-items operates across the horizontal cross axis. Available free space still matters; a container that is only as tall as its content may show little distribution.
2. Wrap
.nav-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }Keep text at a comfortable size. A navigation label may itself wrap inside its link when necessary. Test both the outer header-row wrapping and the inner list wrapping, because they are separate containers.
3. Container and direct children
display: flex on an li arranges that li’s children; it does not arrange sibling li elements. Put it on ul.nav-list to make the list items flex items. This parent/direct-child relationship explains many layout surprises.