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

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Why isn't align-items: flex-end working.

I want the main-nav to by aligned to the right and tried the folowwing;

With this code the main-nav moves a bit up, don't know why that is so eiher.

.main-nav { align-items: flex-end; }

And I tried this code .main-nav li{ align-items: flex-end; } Now the main-nav (the navbar) moves a bit down, but is still not aligned to the right.

Maybe it has to do with something else, so here is the snapshot of workspace: https://w.trhou.se/hd07bwkdkn

5 Answers

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

I have just tried the code you mentioned, but it doesn't work. The items "home, symptomen etc" are allready horizontal aligned. What I want to do is align them to the right.

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

I've seen your code, you should set a width for your .main-nav, for now there's no width, so no space for your items to be aligned to the right. Let me know if it works.

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points 
.main-nav li{
  align-items: flex-end;
}

The "align-items" property is used on the flex container (.main-nav).

You have two solutions

/* Change the selector to .main-nav */
.main-nav {
  align-items: flex-end;
}

/* Change the align-items to align-self */
.main-nav li{
  align-self: flex-end;
}
Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Currently the flex direction of your .main-nav is row (default), so the align-items will vertically align items, for horizontal align, use justify-content.

.main-nav {
  justify-content: flex-end;
}