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

Nick Huemmer
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 17,815 Points

Why does 'justify-content: space-between' in the .main-header min-width: 1025px media query create such a large space?

Why does 'justify-content: space-between' in the .main-header min-width: 1025px media query create such a large space in between the name and main-nav elements? They spread to the opposite sides of the page, which in previous flexbox examples, 'space-between' didn't make such are large separation between items.

Kirt Perez
Kirt Perez
6,762 Points

Did you happen to figure out why the behavior is like this?

1 Answer

Johnny Austen
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Johnny Austen
Front End Web Development Techdegree Graduate 35,274 Points

My best guess is that .main-header has two children - the h1, and the ul. Perhaps "space-between" is providing half the width of the container between them, and therefore each child is pushed to the far sides of the container.