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 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,638 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 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
229,732 Points
Steven Parker
Steven Parker
229,732 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
229,732 Points
Steven Parker
Steven Parker
229,732 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,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 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.