Use core flexbox properties to lay out a horizontal navigation bar.
axis-diagram before-after step-trail A header navigation uses hard-coded margin-left values on every link. It looks acceptable in English but breaks when labels get longer. Let the flex container own item flow, spacing, and alignment. The common shortcut is spacing each link manually. That makes every content change a layout risk and scatters spacing decisions across children. Create the flex context Apply display: flex to the nav list so its direct link items participate in one row-oriented layout model. Flexbox starts on the parent. Styling individual children cannot create a shared axis by itself. Move spacing to gap Remove repeated margin-left…
Sign up free — one personalized lesson every day, matched to your role and goals.
Already have an account? Sign in