Back in the project
with our newly gained knowledge about Flexbox,
so that's the last state of our project,
now is the time to apply this new knowledge right here.
And I want to get started in our header,
so this part of our code here,
and I won't use a separate ID,
it's not required at this stage,
therefore, I'll just go with our header type selector
and I'll begin with setting the display property to flex,
so exactly what we learned in the last lectures.
With that, our nav and our div are next to each other,
and by clicking onto this flex button
we also get the flex container
as a visual helper, here, for our entire header.
So, this was step one.
We, again, have this unused space, here to the right,
and the space should be used as a separator
between our div and the nav element,
therefore, what we'll do now, again, in our flex container,
we will use which property?
The justify-content property, and, here,
we'll go with a value of space-between.
So, again, with that, we also achieve this,
looks nice already.
Besides that, we, again, have the problem
that our items, here, are not aligned correctly.
So the logo, here, is aligned in the center, here,
whereas our nav elements are aligned to the top.
We can quickly solve this
with align-items: center; like this.
With that, the items are now aligned as they should be.
With that, our header looks better already.
The problem still is the positioning
of our two list items here.
We also learned how we can solve this issue.
We will turn the unordered list, here,
into a flex container.
And, with that, we have to control about the children,
the flex items, here, therefore, in our code,
and now not change the unordered list, here,
so this type selector because there might be additional
lists in here, but I will create a separate selector
to select this specific list that we have inside our header.
And, for this, I will use the descendant combinator,
we learned about earlier in the course,
and this combinator will just work like this.
We go to the header, and then we say in the header
we want to access the unordered lists
that are part of this header,
and, by the way, I will put this generic style
for unordered lists above here, a bit,
just to keep the structure.
So we have some generic styles, up here,
for the body and unordered list,
then we have the header, and now we have unordered lists,
which are part of the header,
and then, here, I'll again add the display property
and set it equal to flex,
with the flex direction of row
and the flex wrap being set to no wrap.
With that, this is positioned correctly.
Some margin is still missing, of course,
but we'll work on this in a few seconds.
But, generally, we are coming closer
towards a header with a navigation bar in it.
Let's, maybe, immediately fix this margin issue though.
Here, I'll again use the descendant combinator,
but this time not for the unordered list,
but for the list items.
And, for each list item,
I will add a slight left margin of maybe 20 pixels.
This will improve the look, yeah, I think this looks fine.
We have to work on the padding, maybe, in a few minutes
to keep a bit more distance between the second list item
and the right border, here,
but that's something we can fix easily.
To do this, we go back to the code.
Now, in our header, I will add some padding
and we will add padding for the top,
and to the left, and to the right.
I will add a bit of padding to the top and to the bottom,
don't need to be too much,
and a bit more padding to the left and to the right,
therefore, let's go for 15 pixels top and bottom
and 60 pixels left, right.
So let's see, yeah, now this looks a lot better already.
And if we unselect this flex helper, here,
you'll see this is what it looks like,
still not perfect yet, but we are coming closer.
And, by the way, again, in the code,
to keep things organized,
let's maybe move our logo code
above our code for the unordered list,
so we have the flow of the generic styles,
then our header, then the logo in the header,
and then the list in the header.
With that, I think our header doesn't look too bad already.
If we increase the width
you see this is what it would look like,
I think this is fine.
So we will not finish it completely at this stage,
but if you think back about the project page
with this huge hero image,
which is kind of behind the header,
this will be our next thing to tackle now.
How can we add such an image, and how can we make sure
that it is visible behind our header?