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 Build a Responsive Navigation with Flexbox

Posted by Mike Ernest
Mike Ernest
22,680 Points

Why is the .nav element aligned on the right side of the page when viewed at a min width of 1025px?

I'm sure I'm missing something obvious but I'm confused as to what is causing the .nav element to be aligned to the right side of the page when being viewed at a minimum width of 1025px?

2 Answers

Tom Geraghty
Tom Geraghty
24,174 Points
Tom Geraghty
Tom Geraghty
24,174 Points

It's all about the flex-direction and it's in the nav stylesheet. Check the media queries for this chunk: 

@media (min-width: 1025px) {
    .main-header {
        flex-direction: row;
    }
    .site-logo {
        margin-right: auto;
    }
    .nav {
        margin-top: 0;
        align-self: center;
    }
    .nav li {
        margin-left: .65em;
        margin-right: .65em;
    }
}

For more see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Mike Ernest
Mike Ernest
22,680 Points
Mike Ernest
Mike Ernest
22,680 Points

Thanks Tom! I spent a lot more time with Flexbox and it's making more sense now. Thanks for the response!