Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kirt Perez
7,374 PointsWhen using justify-content in this example, I don't understand how the h1 element and unordered list created a huge gap
How did the unordered list end up sticking all the way to the right?
2 Answers
Jennifer Nordell
Treehouse TeacherHi there, Kirt Perez! That's what "space-between" does. It pushes everything to the ends. The first element gets pushed all the way to the left and the second element gets pushed all the way to the right. Besides "space-between", there's also "space-around", "space-evenly", "center", and "start". I'd suggest taking a look at the justify-content documentation which has a very good demonstration of all of them
Hope this helps!
Kirt Perez
7,374 PointsI get it now. Appreciate it!
Kirt Perez
7,374 PointsKirt Perez
7,374 PointsWhat is considered an element in your reply? The h1 and unordered list? I initially thought that the navigation would still be closer to the site name but just have the spaces in between them that are equal. So if there is two elements using this property, one will stick to the start and one to the end?
Also, I don't understand how we had to use display: flex; twice, on .main-header and .main-nav. If it were just one flex value on the .main-header class, wouldn't .main-header already make the child elements have the flex property already?
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherKirt Perez yes, the h1 is one element and the ul is another element. Both the main-header and the main-nav are now flex containers. So when we're setting the
justify-contenton "main-header" we're talking about justifying its direct children. The only direct children of "main-header" is that h1 and the "main-nav" nav element.Kirt Perez
7,374 PointsKirt Perez
7,374 PointsOne more question, if I were to use justify content on the .main-nav container, would it work? I'm trying to play around with the property using different values but it seems like nothing is changing.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherHi again, Kirt Perez! Yes, you totally could add a
justify-contentto the "main-nav", but the problem with that is that the<ul>itself isn't very wide which means there's not a lot of room to shift around horizontally. It's a little like when you were a kid shaking presents trying to figure out what's inside. If there's a lot of extra room, you notice stuff rattling. If there's no extra room, you hear nothing when you shake it.However, if you added this to
main-navyou'd see a much different result. Again, this will work on the direct children of that main-nav which are the list items:Give it a whirl
Kirt Perez
7,374 PointsKirt Perez
7,374 PointsThanks again! I now understand more than I did before this post!