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

CSS

Posted by mrx3
mrx3
8,742 Points

Having some trouble with my flexbox navigation (codepen included).

I'm trying to get my navigation to appear all way over to the right when the browser is at 1039px. I've tried to do justify-content: flex-end; on the nav ul element on line 97 of my CSS, but the only thing I found that works is padding-left.

Is padding-left the only way to move the nav all the way over? Thanks for any help with this, I've been trying to figures this out for a while now.

codepen: http://codepen.io/mike316/pen/WxVKGx

1 Answer

Erik Nuber
Erik Nuber
20,629 Points

You can see why it isn't happening if you take out 

nav {background: none}

in the last media query. You will notice that the nav is sitting in the center of the page and, is taking up just enough space. If you give nav a max-width or any width, you will notice that the flex-end property works.

Under your original declarations for nav I added

nav {
  width: 43.25em;

and with the flex-end property you achieve the results you are looking for.

mrx3
mrx3
8,742 Points

Thank you for the help Erik. Just fixed it, and now the nav works perfectly. Thank you again.