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
Posted by Nick Huemmer
.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
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
Johnny Austen
.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.