Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Flexbox Layout Building a Layout with Flexbox Building a Navigation Bar with Flexbox

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,622 Points

Auto margin

I did a little bit change in my code . Change has been done only at 769 px. But I am getting different result at 1050 px. Why?

@media (min-width: 769px) {

.main-header,
.main-nav{
    display: flex;
}

.main-header{
    flex-direction: column;
}

.main-nav{
    margin: auto;
}

}

@media (min-width: 1050px){

.main-header{
    flex-direction: row;
    justify-content: space-between;
}

}

Whats the problem with this code ?

2 Answers

Steven Parker
Steven Parker
210,863 Points

The "margin: auto" setting is redistributing the space to center the nav in the remaining space. You could use "justify-content" instead to center it at the smaller width, but it will allow it to go to the right when the direction is changed:

    .main-nav{
  /*    margin: auto; */
        justify-content: center;  /* this will only center for column direction */
    }
Steven Parker
Steven Parker
210,863 Points

You have two media queries here, and the second one takes effect at 1050px width and changes the main flex axis and justify settings of the "main-header". At that width, it overrides the settings in use at smaller widths.

If you don't want the layout to change at that dimension, you should remove the second media query.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,622 Points

But what i got is " the main-nav does not get pushed in the right most corner. They come in the somewhat middle." Why that happens? With justify-content: space-between; it should push the "main-nav" to the right most corner. But that's not happening here.