Tea Cozy Help-I can't figure out how to move/resize any of my elements

Ya’ll, I know that we’re supposed to ask questions that are helpful to others as well as ourselves, but I am major stuck with this Tea Cozy project and was hoping someone would be willing to look at my code and tell me where I’m going wrong. I’ve tried lots of googling and looking through posts on here. I believe there’s something with flexbox that’s just not clicking for me, but I can’t get any of the image elements to resize the way I need them to or move the positions of anything, text or images.

If anybody would be willing to check out what I’ve got so far and at least point me in the right direction, that would be greatly appreciated!! Thank you! (Just for clarification, I sorta gave up on CSS when I got lost and couldn’t figure out where to go.)

Project link: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-layout-with-flexbox/projects/tea-cozy

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Cozy</title>
    <link rel="stylesheet" type="text/css" href="./resources/style.css">
</head>

<body>
   <header>
       <img class="header-img" src="./resources/images/img-tea-cozy-logo.webp" alt="logo of the words tea cozy">
       <nav>
               <span><a href="#mission">Mission</a></span>
               <span><a href="#store">Featured Tea</a></span>
               <span><a href="#location">Locations</a></span>
       </nav>
   </header> 

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

   <div class="monthly-tea">
        <div class="tea-info">   
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at the Tea Cozy?</h4>
        </div> 
        <div class="tea-images">
            <div class="tea">
                <img src="resources/images/img-berryblitz.webp" alt="jar of Berry Blitz tea">
                <p>Fall Berry Blitz Tea</h4>
            </div>
            <div class="tea">
                <img src="./resources/images/img-spiced-rum.webp" alt="wooden box with aluminium wrapped tea inside">
                <p>Spiced Rum Tea</h4>
            </div>
            <div class="tea">
                <img src="./resources/images/img-donut.webp" alt="a sugar-coated donut">
                <p>Seasonal Donuts</h4>
            </div>
            <div class="tea">
                <img src="./resources/images/img-myrtle-ave.webp" alt="a sugar-coated donut">
                <p>Myrtle Ave Tea</h4>
            </div>
            <div class="tea" id="bizzare">
                <img src="./resources/images/img-bedford-bizarre.webp" alt="a cup of reddish tea">
                <p>Bedford Bizzare Tea</h4>
            </div>
        </div>
   </div>

   <div class="locations-container">
        <h2>Locations</h2>
        <div>
            <div class="location">
                <h3>Downtown</h3>
                <p>384 West 4th Street</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>
            <div class="location">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>
            <div class="location">
                <h3>Oakdale</h3>
                <p>515 Crescent Ave</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
             </div>
        </div>
   </div>

   <div class="contact">
       <h4>The Tea Cozy</h4>
       <h5>contact@theteacozy.com</h5>
       <h5>917-555-8904</h5>
   </div>
   
   <footer>
       <h5>copyright The Tea Cozy 2017</h5>
   </footer>
</body>
</html>`

CSS:

/*Univeral Styles*/
body {
    background-color: black;
    font-size: 22px;
    font-family: Helvetica, sans-serif;
    color: seashell;
    opacity: 0.9;
    text-align: center;
}
a {
    color: seashell;
}

/*Header and Nav*/
header {
    position: fixed;
    height: 69px;
    border-bottom: 1px solid seashell;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: black;
}

.header-img {
    justify-content: flex-start;
    height: 50px;
    margin-left: 10px;
}

/*MISSION*/
.mission {
    background-image: url("./images/img-mission-background.webp");
    height: 700px;
    width: 1200px;
    display: flex;
}

.mission-statement {
    justify-content: center;
    flex-direction: row;
    position: relative;
    width: 100%;
}

/*TEA IMAGES*/
.monthly-tea {
    width: 1000px;
    margin-bottom: 100px;
}

.tea-images {
   display: flex;
   justify-content: space-around;
   width: 100%;
   flex-wrap: wrap; 
   height: 20px;
   width: 30px;
}

/*LOCATIONS*/

.locations-container {
    height: 500px;
    width: 1200px;
    background-image: url("./images/img-locations-background.webp");
    display: flex;
}

Hi @nataliebotkins108391
welcome to the forum!
I’d recommend you go through your HTML and check if your closing tags are consistent with the opening ones first.

I think your main problem is that you set many of your <div>s to fixed widths. You could set containers which aren’t flex-containers to 100% and use a max-width in case they should not take the whole space on large devices.
For your flex-items you could use flex-basis to define a default width.

1 Like