TeaCozy Layout with Flexbox project?

I am trying to figure out how to get the text:
“Our Mission
Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea”

to display exactly like it does here: https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg on top of the image. Basically “how to vertically center and horizontally center text on an image”. I am able to get it horizontally centered but when trying to center vertically it it all goes on one line, instead of having the “Our mission” part right above the rest of the text.

Hello!

Can you share your current code please? Preferably formatted according to this: How do I format code in my posts? :slight_smile:

html:

<div class="mission-container">
            <h2 class="mission-text">Our Mission</h2>
            <h4 class="mission-text">Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>

css:

.mission-container {
    height: 700px;
    width: 1200px;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
    margin: 0 auto;   
    
    
}

.mission-text {
    background-color: black;
    
}

I have a question for you. Have you had any problems having the CSS images to load in this project?
the teacozy\resources\images\img-locations-background.jpg and teacozy\resources\images\img-mission-background.jpg.
I am sure it must be my path to the image because the rest of the CSS works.

Update, I got the mission-background image to work, but now I can seem to get the location’s image to work.
I tried the same thing I did with the mission, but the location won’t load.

type or paste code here
<div id="mission">
        <div class="mission-container">
            <div class="text-over">
                <h2>Our Missions</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
    </div>

type or paste code here

    background-image: url(./images/img-mission-background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 700px;
    max-width: 1200px;
    margin: 40px auto 40px auto;
    display: flex;

}

.text-over {
    margin: auto;
    background-color: black;
    width: 100%;

}

![image|251x281](upload://k5vEPhabBZ8cTuIPByCx6gwM3Ig.png) this is my file tree.