Add the CSS needed to activate flexbox on the correct element to match the example image. You only need to activate flexbox now. Don't worry about other flexbox-related properties.
Hint 1: Make sure to write your CSS properties in alphabetical order.
Hint 2: Depending on the size of your window, the spacing may look a little different.
To make things look a little better, let's space things out horizontally so the logo is all the way to the left and the nav is all the way to the right, as shown in the example image.
Hint 1: Make sure to write your CSS properties in alphabetical order.
Hint 2: Depending on the size of your window, the spacing may look a little different.
To finish off this header, align the flex-children vertically so that the logo and the nav are centered within the header, as shown in the example image.
Hint 1: We are not focused on lining up the baselines of the text.
Hint 2: Make sure to write your CSS properties in alphabetical order.
Hint 3: Depending on the size of your window, the spacing may look a little different.
Use flexbox to make the list match the image. You will need to reverse the direction in which the items stack and center them horizontally.
Hint 1: Make sure to write your CSS properties in alphabetical order.
Hint 2: Depending on the size of your window, the spacing may look a little different.
In this step, you'll need to think about a few different factors. To match the example image, vertically center the h1 and the p in the space available.
You'll probably need to take a peek at the HTML tab to see the element structure.
Hint 1: you will only need to add 3 properties
Hint 2: Make sure to write your CSS properties in alphabetical order.
Hint 3: Depending on the size of your window, the spacing may look a little different.
Once again in this step, use flexbox to match the layout in the image shown. Notice that there is equal horizontal space between the cards and between the outer cards and the edges. Also pay attention to their vertical behavior.
You'll probably need to take a peek at the HTML tab to see the element structure. Pay attention to which element you target with flexbox.
Hint 1: When it comes the vertical behavior, we are more concerned about the alignment of the tops of the cards than the alignment of the text.
Hint 2: Make sure to write your CSS properties in alphabetical order.
Hint 3: Depending on the size of your window, the spacing may look a little different.
And one more time, use flexbox to match the layout in the image shown. Notice the order of the content. Notice the vertical alignment and the horizontal spacing, where the children are as far away as possible from each other.
You'll probably need to take a peek at the HTML tab to see the element structure. Pay careful attention to which element you target with flexbox.
Hint 1: Make sure to write your CSS properties in alphabetical order.
Hint 2: Depending on the size of your window, the spacing may look a little different.