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 Responsive Layouts Responsive Patterns Flexbox

Susie Kim
Susie Kim
6,143 Points

What makes the nav element align right?

At the 1030px breakpoint when the flex property goes to none, the nav li items align right. Why does this happen?

3 Answers

Susie Kim
Susie Kim
6,143 Points

I figured it out after continuing forward with the Flexbox course. It's:

.header { justify-content: space-between; }

When the screen gets bigger than 1030px and .nav's flex(-grow) property goes to none, it stops taking up the whole line, then the parent container, .header makes its children, .nav and .logo, arrange apart from each other.

Susie Kim
Susie Kim
6,143 Points

I didn't show "my" code because I was referring to the workspace associated with the video on which I posted the question. But here it is:

/******************************
Flexbox Layout
*******************************/

.header, .nav {
  display: flex;
  flex-direction: column;
}

.header {
  justify-content: space-between;
}

.nav {
  flex: 1;
  justify-content: space-around;
}

@media all and (min-width: 640px) {
  .header, .nav {
    flex-direction: row;
  }
}

@media all and (min-width: 1030px) {
  .nav {
    flex: none;
  }
}


/******************************
Additional Styling
*******************************/

body {
  margin: 0;
  font-family: Helvetica;
  background: #5fcf80;
}

.header {
  padding: 20px 0;
  margin: 0 auto;
}

.logo {
  background: transparent url('../img/treehouse-white.svg') center center no-repeat;
  width: 195px;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.nav {
  list-style: none;
}

.nav li {
  margin: 12px 0 12px 28px;
}

.nav li a {
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}

.nav li a:hover {
  color: rgba(255,255,255,0.7);
}

.nav li:last-child a {
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  transition: 200ms ease-in-out;
  padding: 8px 16px 7px;
}

.nav li:last-child a:hover {
  background: rgba(255,255,255,0.5);
  color: #fff;
}

@media all and (min-width: 1030px) {
  .header {
    width: 1030px;
    min-width: 768px;
  }
Patrick Hartley
Patrick Hartley
12,725 Points

You'll need to link or show your code so we can see what's going on behind the scenes.