And let's start this lecture
with a little challenge for you.
With the knowledge we gained so far,
you should be able to make sure that these two elements,
so the list items in our unordered list,
are positioned next to each other, not below each other.
For this, you will have to use the display flex rule.
Make sure to remember the concept
of containers and flex items
and the parent and child relationship these two have,
and, as a bonus, you can also try to align
these two elements,
which should then be sitting next to each other,
to the right of this nav element here.
Give it a try.
Now is your chance to pause the video,
and then we'll solve this together.
How did it go? Were you successful?
Well, it wasn't the biggest challenge, hopefully,
but it was a great way to create
the first flex layout on your own.
Because the awesome thing is that our flex logic
always applies to the parent, so the header here,
and the direct children, the div and the nav element.
So if we want to change the position
of the two list elements here, these two list items,
then why don't we turn our unordered list, here,
into a flex container, which then gives us full control
over these two children, these two flex items,
and that was exactly the way to solve this.
Just go to the unordered list, here,
and add display: flex; which solves the first task.
Again, we know that the flex-direction is row,
therefore this is exactly the alignment we need right here.
And, then, the second task was to make sure
that these two elements are pushed
to the right of the container.
Well, this can be done with our justify-content property,
but this time not space-between, as before,
because then the result would look like this,
but here we can now simply use flex-end.
With that, this challenge is solved.
As a little bonus, don't know if you did that,
if you also want to make sure that the text
is aligned to the right, well, then this can be done
without any flex context here.
Here we can simply use the text-align property,
here on our list items, and align these to the right.
With that, this goal would also be achieved.
And this is our introduction to Flexbox in this course.
As I said, attached to the last lecture of this module,
you can find a summary of all these properties used
and a bit more, but with this knowledge
we are able to create our header and our navigation bar,
and, therefore, we can apply these concepts in practice.