Hi, Can anyone help me check my answer?
Here is the answer.Thank you 
Hello @Fgui_Zhang
Overall Great work! 
Two questions:
- What is the reason for
nav li{ flex: 1; }? It seems to make no difference when I disable it. - If the viewport is between 600px and 1300px the
<nav>is too narrow and the content has line breaks. How could you solve that?
Have a nice day!
Michael
PS: For future tasks please remember to also put a link to the MDN page. So we don’t have to search for it 
Thank you very much . The reason I add flex = 1 is that I want every flex items share the same amount space.But as you can see, it didn’t work. For the question two, I think I can add a media query with the condition @media screen and (min-width: 600px) and (max-width:1300px) to specify rules to make the link more larger and move the sidebar to the bottom.Also, change the original condition into min-width: 1300px.
Have a nice day~~~
Fgui
1 Like
You’re welcome!
flex 1; would cause all <li> to grow equally if there is empty space in the container. But this doesn’t help in this case.
Possibly an easier solution to the line break problem would be to change the header from grid to flex:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
I hope those two extra questions gave you some additional insight in this complex topic
I got it! I have tried your solution just now, it works well! Thank you again.
1 Like
I got it~ I have tried your solution just now, it works well! Thank you again.
1 Like
Cool
By the way: I got my flex: 1; explanation wrong above. I edited it.
1 Like