Help with Flexbox - Aligning Header

Hello, I am having trouble getting flexbox to do what I want. Im trying to set up my header to look like the one in this project. Logo on the left, and 3 <li> items on the right, with space in between.

  1. Why doesn’t justify-self: flex-end make #nav-bar go to the right edge of the container?

  2. Why doesn’t justify-content: space-between make #list-items space out each <li> item?

Here is my codepen. Thank you!

  1. See here on MDN:

In flexbox layouts, this property is ignored

  1. It does, but you need to increase the width of the container element for it to be work (currently it’s width is being implicitly set by the size of its contents).

Also don’t forget to close off your <a> tags in the nav items.

1 Like

Thank you so much for all the help!

  1. Was pretty straight forward once you explained the significance of specifying the size (I didn’t even know it played a role in flexbox).

  2. I got a bit confused on what to look for specifically on MDN, but realizing the importance of specifying size, I kinda figured out I needed to fix my parent container.

Thanks so much! Here is the updated code.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.