Hi everyone! I started working on the Tea Cozy project in flex and I need help to put the black background in the middle of the page and make the 2 lines (Our Mission and the line below it) fit into the black border. This is the web page https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg
Thank you!
Hey @zina2
Basically one way to do it is to add background-color: black; to the element that contain Our Mission and the line below and then center it with one of the flexbox properties (in this case align-items). This site is a good resource and list all the properties regarding flexbox (and more!).
Hope this helps.
Thanks! This is what I have though.
My text align doesn’t seem to work and the background color is still not encompassing the other text on the background image.
This is my code. I can’t lie this project is really difficult. Thank you for you help!
You need to add a <div> that encapsulate your h2 and h4 and put your mission-statement class on this <div> like this:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="mission-statement">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea </h4>
</div>
</div>
</body>
</html>
You added class="mission-statement" to your <h2> so the CSS was only applied to your <h2>
It’s working but you didn’t added a width to .mission-statement, so if you don’t add a width, by default the width will fit the size of the content. This is why your <h4> is aligned, you added a width to .container.
You should also put display: flex; and align-items: center; to the .container selector, because for flexbox to work you need to put display: flex and it’s properties to the parent of the element you wanna apply flexbox on, so in my code above .container is the parent of .mission-statement
Flexbox is hard to grasp at the beginning so it’s totally normal to struggle (and iirc It’s the first big project in the front-end-path). If you wanna get more familiar with flexbox I highly recommend Flexbox Froggy
Just keep going ! 
Wow bro/sis/they you are amazing! Thank you very much for taking time out of your day to give me solutions and for telling me about flex froggy!
The solutions worked! Hopefully I can do the rest now with little guidance fingers crossed 
hello @nab-sa please how do I get my text to not move on the webpage? The text underneath the pictures move as I expand or shrink the page. I use position:relative then tweak the top and sides. I tried using position:fixed and sticky too to no avail.
Thank you very much in advance 
From that I’m supposing you want the page to be responsive, in this case you shouldn’t use position:
While you’re on the Making a Website Responsive syllabus you haven’t got into relative units and media queries yet so it’s normal if your content behave like that as you shrink and expand the page so I’d say just remove the position property, finish the project like in the design spec and go back to this project later (at least after the Learn Responsive Design part) to make it responsive.
But, if you still want to make it responsive I suggest at least reading these two links:
Beginner’s guide to media queries (this article is long)
Relative units
Thank you @nab-sa ! Your help is always appreciated
