Remember this is what we're actually looking for.

We want to have some nice space and styles here for this nav bar and then the logo right on top of it. So let's start building that out. We already have all of the structure that we're going to need from an HTML perspective.

We're not going to do any work here but we do need to start adding some custom styles, and as you know we have our navigation wrapper and then we have all of our left columns styles and now what we're going to do is we're going start working on the center column.

So far we've only used the center column banner image selector but right above here I'm going to create some styles just for the center column.

styles.css

.navigation-wrapper > .center-column {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 42px;
    width: 500px;
}

Hit save, now come back and hit refresh and you can see that that's working.

Now it's not centered but that's perfectly fine. We're not done yet. Let's right click and hit inspect and let's see exactly what this is looking like if we inspect the element.

You can see we have the image, if we click on center-column you may notice that what it's doing, it may look like it's off centered but the element itself is actually perfectly centered.

It just goes from left to right, so in order to center the items, we'll see what we need to do in order to do that. But as far as the column itself, it is taking up the exact amount of space that we're wanting.

Now what I want to do and this is part of the reason why I added a banner-image-wrapper instead of just having the image, I want to take just the banner-image-wrapper, so I'm going to remove the image selector here at the very end.

styles.css

.navigation-wrapper > .center-column > .banner-image {
    display: flex;
    justify-content: center;
}

Let's hit save. Notice how we have a grid container that has two grid elements, the banner-image itself and the nav-links, and inside of that banner-image, we are turning that into a flex container so we can manage the image positioning.

So now if I hit refresh you can see that our image is now centered perfectly.

So that is looking good.

Now what we have to do is grab those links and do the same thing with them.

styles.css

.links-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

I'm just going to call the links-wrapper by itself so that we can use it in other parts of the application. I think this is going to be a better use of that links-wrapper class so that it's a little bit more scalable and reusable.

let's come and hit refresh and look at that.

We actually have something that is getting much closer to the final version. This is coming along quite nicely. And notice how we have been able to use two Flexbox containers and we have those nested inside of a CSS grid container.

One of the common questions that I get, especially from new students who have just been introduced to tools like CSS grid and Flexbox, is which one I prefer.

In my personal opinion, it's been my experience in the projects I've built out that it's not a choice between the two but the two actually complement each other perfectly.

I know I've said that before but I do want to just reiterate it because this is a question that I've been asked multiple times so I want to make my own feelings on it clear.

I think that Flexbox and the CSS grid tools should be used in conjunction with each other because like you've seen right here we were able to take both of those and we're able to create a really nice looking interface by combining them and utilizing their strengths.

We're going to take a break right now. That is a great job, you have learned how to combine CSS grid and Flexbox and how you can switch between them in order to align items perfectly on the page.