Flexbox and Text and Spacing

I am looking for some help with flexboxes. I just completed the Layout with Flexbox exercise in the Web Development career path.

In the exercise I had to create several flex boxes. I ran into a couple problems that my googling and searching has not been able to solve.

In a flexbox I want to create text that sits above the flex items. Take a look at the design specifications of the exercise: https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg

In the first case of the background image with a centered item that stretches the full width of the container, I was able to vertically align and reproduce it as the design specification requested.

However in the case of section “Locations” I am unable to set the text “Locations” above the center element.

I want to create:

Text Here
Flex.Item Flex.Item Flex.Item

Instead I am always getting

Text Here Flex.Item Flex.Item

So I need to know how to create text that can sit above the flex items and not be subjected to the rules and behaviors of the other items within the container. (I hope that makes sense).

What is the solution to this?


I would also like to ask about how to properly create spacing between the items in the Tea of the Month. I have been able to reproduce the order and spacing of the items, however I am not able to get the specified 10px margin between the image and the accompanying text.

I know it seems like I’m asking for the answer/solution on how to solve this exercise, but I have been able to properly position and solve every other element on the page.