Content center

First you need to take your image and anchor tag out of the list-item tag in your html, use a div instead. It's best practice to only use <li> inside <ol> or <ul> tags.

In your nav.css file you have the flex-items declared before your flex-container. So basically you're trying to style flex-items before they actually become flex-items, because you have the .main-header {display: flex;} below the logo and nav in you css.

After that the best way you're going to learn is to dive deeper and watch the flexbox layout videos here on treehouse to get a better understanding of how to layout your site using flex properties. Here is a link https://teamtreehouse.com/library/css-flexbox-layout

Hello Srdjan,

Check the following Link, you want it in this style? :-) http://up.picr.de/24603095vl.jpg

If yes, I set the in the nav.css the margin-top of the logo on 77px. Here the Code:

.site-logo {
  display: block;
  margin: 2em auto;
  width: 200px;
  margin-top: 77px;
}

This is only one way to fix the problem. I hope I can help you.

-Christian

That's reason I decide to learn front end framework : weird spacing between elements and responsive design ... :)