Tea Cozy "Tea of the Month" and "Locations" Flex box Properties

Hi everyone,

I am working on the Tea Cozy project, and I am struggling with two major parts. For the “Tea of the Month” section, I have been having issues with getting the text to be positioned directly under the images, and to be able to adjust the spacing between the images. Also, I have been having issues with keeping the elements within 1000px. My other issue, is that images in the “Locations” section are not spaced out. I have tried multiple possible flex box properties and combination of those properties, but when I do, the webpage either doesn’t change or essentially undoes the action (especially in the “Tea of the Month” section). I would like to know if I have any code that is overriding any other code that I’ve written or if there is another flex box property combination I need to consider. P.S. the comments are labels for the webpage sections, code I may or may not keep, and other code I would like to consider implementing.

Tea Cozy Project link:
[file:///Users/simonemcdaniels/Desktop/Codecademy/projects/Tea%20Cozy/index.html#locations](file:///Users/simonemcdaniels/Desktop/Codecademy/projects/Tea%20Cozy/index.html#locations)
HTML code:

<!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 | Codecademy</title>
    <link href="../Tea Cozy/resources/css/styles.css" rel="stylesheet" type="text/css">
    <!-- /Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/index.html -->
    <!-- projects/Tea Cozy/index.html -->

</head>

<body>
    <!-- Navigation Bar -->
    <header>
        <!-- Tea Cozy Logo -->
        <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-tea-cozy-logo.png" class="logo">
        <nav>
            <ul>
                <li><a href="#mission" class="sections">Mission</a></li>
                <li><a href="#month" class="sections">Featured Tea</a></li>
                <li><a href="#locations" class="sections">Locations</a></li>
            </ul>
            <!-- figure out how to link list items to sections of page -->
        </nav>
     </header>  
     <!-- consider coding breadcrumb links as flat buttons -->
     <!-- Hover function/command--cursor behavior should change when mouse hovers over underlined words -->
    
    
     <main>
     <!-- Mission section -->
                <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-mission-background.jpg" class="mission-img">
                    <!-- insert above image as a background image -->
                    <h2 id="mission">Our Mission</h2>
                    <h4 class="description">Handpicked, Artisanally Currated, Free Range, Sustainable, Small Batch, Fair Trade, Organic</h4>
  
    <!-- Tea of the Month section -->
        <h2 id="month">Tea of the Month</h2>
        <h4 class="steeping"> What's Steeping at The Tea Cozy?</h4>
        <div class="teas">
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-berryblitz.jpg" class="fall-berry-img">
            <h4 class="fall-berry">Fall Berry Blitz Tea</h4>    
        
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-spiced-rum.jpg" class="spiced-rum-img">
            <h4>Spiced Rum Tea</h4>
        
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-donut.jpg" class="seasonal-donuts-img">                
            <h4>Seasonal Donuts</h4>
        
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-myrtle-ave.jpg" class="myrtle-ave-img">
            <h4>Myrtle Ave Tea</h4>
    
            <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-bedford-bizarre.jpg" class="bedford-bizarre-img">
            <h4>Bedford Bizarre Tea</h4>
        </div>    
        <!-- Consider making containers "pop out" when mouse hovers over each container -->
        
    <!-- Locations section -->
        <h2 id="locations">Locations</h2>
        <img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-locations-background.jpg" class="locations-background">
           <div class="locations-sect">
                <div class="downtown">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="east-bayside">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="oakdale">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div> 
    </main>

<!-- Footer -->
    <footer>
        <div class="contact-info">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-555-8904</h5>
        </div>
        <h5 class="copyright">copyright The Tea Cozy 2017</h5> 
    </footer>
</body>
</html>

    <!-- /Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/css/styles.css -->
<!-- projects/Tea Cozy/resources/css/styles.css -->

CSS code:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px; 
    color: seashell;
    background-color: black;  
    opacity: 0.8;
    text-align: center; 
    margin: auto 0;   
}

/* Navigation Bar */
header {  
    position: fixed; 
    text-decoration: underline; 
    display: flex;
    width: 100%;
    border-bottom: 1px solid seashell;
    background-color: black; 
    height: 69px;
   } 
   

img.logo {
    height: 50px;
    padding-left: 10px;
    padding-top: 10px;
    display: inline-flex;
    justify-content: flex-start;
} 

nav {
    display: flex;
    background-color: black; 
    height: 69px;
    border-bottom: 1px solid seashell;
    text-decoration: underline; 
    display: inline-flex;
    justify-content: flex-end;
    flex-grow: 2;
} 

ul {  
   height: 69px;
   padding-right: 10px;
   display: flex;
}

li {
    text-decoration: underline;
    height: 69px;
    padding-right: 20px;
    display: inline-flex;    
} 

a {
    color: seashell;
    text-decoration: underline;
    cursor: pointer;
}

a, .sections:hover {
    color: #c9c9c9;
    text-decoration: none;
    cursor: pointer;
}

.sections:visited {
    color: #c9c9c9;

}
    
img.mission-img {
    height: 700px;
    width: 1200px;
    position: static;

}

/* Mission */

#mission {
    background-color: black;
    position: relative;
    bottom: 375px;
    margin: 0 auto;  
    width: 1200px;
    height: 50px;
    padding-top: 10px;    
}

h4.description {
    background-color: black;
    position: relative;
    bottom: 375px;
    margin: 0 auto;  
    width: 1200px;
    height: 50px;
    padding-top: 10px;  
}


/* Tea of the Month */

div.teas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#month {
    width: 1000px;
    display: flex;
    flex-direction: column;  
}

h4.steeping {
    width: 1000px;
    display: flex;
    flex-direction: column;  
}

 img.fall-berry-img, img.spiced-rum-img, img.seasonal-donuts-img, img.myrtle-ave-img, img.bedford-bizarre-img {
    height: 200px;
    width: 300px;
    display: flex;  
    
}


h4.fall-berry {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}
/* Property for putting elements under image? */

/* h4.fall-berry, h4.spiced-rum, h4.seasonal-donuts, h4.myrtle-ave, h4.bedford-bizarre {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
       
} */


/* h4.spiced-rum {
       

}


h4.seasonal-donuts {
        
} 

h4.myrtle-ave {
    
     
}

h4.bedford-bizarre {
    
} */


/* Locations */

#locations {
    position: relative;
    top: 100px;
    padding-top: 30px;
}


img.locations-background {
    height: 800px;
    width: 1200px;
    position: static;
    
   
}
/* consider adding id properties */

 /* consider adding and adjusting property */


 /* h3, p {
    display: flex;
    align-content: space-between;
    
 } */

 div.locations-sect {
    display: flex;
    justify-content: center; 
 }

div.downtown, div.east-bayside, div.oakdale {
    background-color: black;
    height: 300px;
    width: 300px;
    opacity: 1;
    position: relative;
    bottom: 710px;
    display: flex;
    flex-direction: column; 
     
}

/* div.downtown, div.east-bayside {
   
} */
/* div.downtown, div.oakdale {
    display: flex;
    flex-shrink: 1;
} */


div.downtown {
    padding-right: 40px;
    display: inline-flex;
}

div.east-bayside {
    padding-right: 40px;
    display: inline-flex;
}

div.oakdale {
    padding-right: 40px;
    display: inline-flex;
}

 /* Footer */

div.contact-info {
    text-align: center;
    max-height: 200px;
    
}

h5.copyright {
    text-align: left; 
    padding-left: 20px;
}

Hi. I have no idea if I did this right. There probably is a better way to do it. The only thing I know is that I managed to get the wanted results.

Here is the result: The Tea Cozy

Here’s the 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">
    <link rel="stylesheet" href="style.css">
    <title>The Tea Cozy</title>
</head>
<body>
    <header>
        <img src="img-tea-cozy-logo.webp" alt="tea cozy logo" id="logo" />
        <nav>
            <a href="#">Mission</a>
            <a href="#">Featured Tea</a>
            <a href="#">Locations</a>
        </nav>
    </header>
    <main>
        <div class="mission">
            <div id="mission">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
        <div class="TotM">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div class="images1">
                <div class="options">
                    <img src="img-berryblitz.webp" alt="a mug with berries">
                    <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div class="options">
                    <img src="img-spiced-rum.webp" alt="a tea box reading 'It pays to buy good tea'">
                    <h4>Spiced Rum Tea</h4>
                </div>
                <div class="options">
                    <img src="img-donut.webp" alt="a donut">
                    <h4>Seasonal Donuts</h4>
                </div>
            </div>
            <div class="images2">
                <div class="options">
                    <img src="img-myrtle-ave.webp" alt="A cup of tea hidden behind tulle">
                    <h4>Myrtle Ave Tea</h4>
                </div>
                <div class="options">
                    <img src="img-bedford-bizarre.webp" alt="a mug filled with red tea and sugar on the side">
                    <h4>Bedford Bizarre Tea</h4>
                </div>
            </div>
        </div>
        <div id="bg-img">
            <h2 id="titre">Locations</h2>
            <div class="locations">
                <div class="loc">
                    <h3>Downtown</h3>
                    <p>384 West 4th St
                    <br>
                    Suite 108
                    <br>
                    Portland, Maine</p>
                </div>
                <div class="loc">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue
                    <br>
                    (Northwest Corner)
                    <br>
                    Portland, Maine</p>
                </div>
                <div class="loc">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue
                    <br>
                    Second Floor
                    <br>
                    Portland, Maine</p>
                </div>
            </div>
        </div>
    </main>
</body>
<footer>
    <div id="footer">
        <h2>The Tea Cozy</h2>
        <h5>[email protected]
            <br><br>
            917-555-8904
        </h5>
    </div>
    <div id="copyright"><h5>copyright The Tea Cozy 2017</h5></div>
</footer>
</html>

And the CSS:

* {
    background-color: rgb(0, 0, 0);
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    text-align: center;
}

header {
    position: fixed;
    padding-left: 10px;
    height: 69px;
    border-bottom: 1px solid seashell;
    display: inline;
    background-color: rgb(0, 0, 0);
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    margin-top: 20px;
    box-sizing: border-box;
}

#logo {
    height: 50px;
    text-align: left;
    float: left;
    background-color: transparent;
}

nav {
    text-align: right;
    background-color: none;
    margin-right: 20px;
    margin-top: 10px;
    background-color: transparent;
}

nav a {
    margin: 20px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 26px;
}

h4 {
    margin-top: 10px;
}


main img {
    width: 300px;
    height: 200px;
}

main {
    margin-top: 100px;
}

.mission {
    background-image: url('https://raw.githubusercontent.com/melodyide/Tea-Cozy-Challenge/main/img-mission-background.webp');
    height: 700px;
    width: 1200px;
    margin: auto;
}

#mission {
    position: relative;
    top: 300px;
    padding: 5px;
}

.TotM {
    width: 1000px;
    margin: 50px auto;
}

.images1 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
}

.images2 {
    width: 680px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
    margin: 0 auto;
}

#bg-img {
    background-image: url('https://raw.githubusercontent.com/melodyide/Tea-Cozy-Challenge/main/img-locations-background.webp');
    height: 500px;
    width: 1100px;
    margin: auto;
    padding: 20px;
}

#titre {
    background-color: transparent;
    margin-bottom: 15px;
}

.locations {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    margin: 0 auto;
    background-color: transparent;
}

.loc {
    width: 300px;
    margin: 40px 15px;
    background-color: black;
    line-height: 60px;
}

#footer {
    height: 200px;
    flex: 1;
    line-height: 40px;
}

#copyright {
    float: left;
    position: relative;
    margin-left: 20px;
}

Hey! The Tea Cozy Project is definitely a doozy coming out of learning Flexbox stuff. Also super frustrating to not have someone to help you right away when you run into stuff like this. Hopefully this helps! (I think I can answer all of your questions - also this is my first time posting on the forum so hopefully I can format this response correctly.)

  1. To answer your big question, I utilized figure and figcaption - I find them to be the easiest ways to get images to have their captions locked under them and to manipulate them together.
  2. I was also frustrated at first trying to use a flexbox action to get these five images to line up like they do in the example document. I found NOT using flexbox to the easiest. I literally just separated the top three and bottom two into two rows, and then centered them horizontally in their respective rows.
  3. As far as your issues with making changes and them not taking effect. Try using “div”, “section”, and other ways to box off elements in your code more. I think of every element as a box - you have 5 images coded one after another, each one has it’s own box, along with the captions you put in as h4s. It will be VERY difficult to get your image and your H4 do the same thing you want it to do through CSS because they’re separate “boxes”. You’re basically telling one child to do something and the other four aren’t listening. If you look at my code, I have each image AND caption in a figure “box” - then to divide the images into separate rows I put the top three images into a “box” and the bottom two into a “box” - (div class= teas1) and (div class= teas2). Now that they’re in separate boxes I can manipulate those boxes individually.
    Sorry that’s a bit long-winded but let me know if that makes sense.

Here’s my HMTL (it’s not fully responsive or finished)

<!-- Header and Navigation -->
<div class="header">
    <img src="./resources/images/logo.png">
    <ul class="nav">
        <li><a href="#">Mission</a></li>
        <li><a href="#">Featured Tea</a></li>
        <li><a href="#">Locations</a></li>
    </ul>
</div>

<!-- Main Mission Section -->
<div class="main">
    <div class="banner">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
</div>

<!-- Featured Tea Section -->
<div class="featured-tea">
    <h2>Tea of the Month</h2>
    <h3>What's Steeping at The Tea Cozy</h3>
</div>

<div class="teas1">
    <figure>
        <img src="./resources/images/berry-blitz.jpg" 
             alt="A top down image of a mug of tea">
        <figcaption>Fall Berry Blitz Tea</figcaption>
    </figure>

    <figure>
        <img src="./resources/images/spiced-rum.jpg" 
             alt="Opened box of tea">
        <figcaption>Spiced Rum Tea</figcaption>
    </figure>

    <figure>
        <img src="./resources/images/donut.jpg" 
             alt="A top down image of a mug of tea">
        <figcaption>Seasonal Donut</figcaption>
    </figure>
</div>
<div class="teas2">
    <figure>
        <img src="./resources/images/myrtle-ave.jpg" 
             alt="Donut with white powder on top">
        <figcaption>Myrtle Ave Tea</figcaption>
    </figure>

    <figure>
        <img src="./resources/images/bedford-bizarre.jpg" 
             alt="Top down image of a mug of tea and sugar container">
        <figcaption>Bedford Bizarre Tea</figcaption>
    </figure>
</div>

<!-- Locations Section -->

<div class="locations-section">
    <div class="locations">

        <div class="locations-header">
            <h2>Locations</h2>
        </div>

        <div class="downtown">
            <h3>Downtown</h3>
            <h4>384 West 4th St</h4>
            <h4>Suite 108</h4>
            <h4>Portland, Maine</h4>
        </div>

        <div class="east-bayside">
            <h3>East Bayside</h3>
            <h4>3433 Phisherman's Avenue</h4>
            <h4>(Northwest Corner)</h4>
            <h4>Portland, Maine</h4>
        </div>

        <div class="oakdale">
            <h3>Oakdale</h3>
            <h4>525 Crescent Avenue</h4>
            <h4>Second Floor</h4>
            <h4>Portland, Maine</h4>
        </div>

    </div>
</div>

<!-- Footer and Sub-footer Section -->

<div class="footer-section">
    <h2>The Tea Cozy</h2>
    <h5>[email protected]</h5>
    <h5>917-555-8904</h5>
</div>
<div class="subfooter">
    <h5>copyright The Tea Cozy 2017</h5>
</div>

Here’s my CSS:

body {
    background-color: black;
    font-size: 22px;
    text-align: center;
    max-width: 1300px;
}

h1, 
h2,
h3,
h4,
h5,
figcaption {
    opacity: 0.9;
    font-family: helvetica;
    color: seashell;
}


/* Header and Navigation Section */

.header {
    z-index: 1;
    height: 69px;
    position: fixed;
    top: 0px;
    width: 1300px;
    background-color: black;
}

.header img {
    height: 50px;
    margin-left: 10px;
    float: left;
    opacity: 0.9;
}   

.nav {
    float: right;
}

.nav li {
    display: inline-block;
    padding-right: 20px;
    opacity: 0.9;
}

.nav a {
    text-decoration: underline;
    font-family: helvetica;
    font-size: 22px;
    color: seashell;
    opacity: 0.9;
    text-align: center;
}

/* Main Mission Section */

.banner {
    background-color: black;
    width: 1200px;
    padding: 10px 0px;
    line-height: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}   

.main {
    height: 700px;
    width: 1200px;
    background-image: url(./images/background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    max-width: 1200px;
    margin: 69px 50px 0px 50px;
    position: relative;
}

/* Featured Tea Section */

.featured-tea {
    width: 1000px;
    margin: 0 auto;
    padding-top: 60px;
    letter-spacing: -1px;
}

.teas1 figure {
    display: inline-block;
}

.teas2 figure {
    display: inline-block;

}

figcaption {
    font-weight: bold;
    letter-spacing: -1px;
    margin-top: 10px;
    padding-top: 0px;
}

figure img {
    height: 200px;
    width: 300px;
}

/* Locations Section */

.locations-section {
    background-image: url(./images/locations.jpg);
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
    width: 1200px;
    max-width: 1200px;
    position: relative;
    margin: 25px auto;
}

.locations {
    display: inline-block;
    margin-top: 90px;
}

.downtown,
.east-bayside,
.oakdale {
    width: 300px;
    height: 265px;
    background-color: black;
    margin: 0 40px;
    display: inline-block;
}


/* Foot and Sub-footer Section */

.footer {
    height: 200px;
    max-width: 1300px;
}

.subfooter {
    float: left;
}
1 Like

Hi Tera,

Dunno if you were finally able to fix the issues you were having but maybe I can share some of my ideas. As you know, when it comes to coding there is no singular solution so my solution is probably one of many different routes you can take to achieve the specs/look that the project requires.

  • For the letters underneath the pictures in “Tea of the Month” section, for each type of tea I put both the picture and the name in one div for each of the different teas and named all five div containers the same class name “tea” since they all share the same css styling. Example, for “Fall Berry Blitz Tea” I made a div container named “tea” and in that container placed the img src and after that I put the name of the tea encased in an h4 element. For added flair I further placed a link inside the h4 so that I can make the name of the tea into a link. This is something extra that I put in but is not in the specs of the project.
    The img tag is an inline element but the h4 is a block-level element, therefore the name of the tea encased in the h4 element will automatically begin on the line below the image (at lease this is what I understand it to be) thereby placing the name below the image. To center it (and every other text in the page with the exception of the copyright at the bottom) I just centered all h2, h3, h4, and h5 elements in the global rules sections of my css file.

  • For the 1000px tea containers and things not being able to fit in it…I think if you do it like I mentioned above you will be able to fit all five teas in that container. I think that the problem in this case is that you have too many loose elements in your html code. If you group things a little more as mentioned in the first bullet you can condense things into a smaller space and make better use of it.

  • For the locations boxes…not sure by what you mean when you say “images”. The only image in that section should be the background image. Aside from that it is just 3 black boxes with text. So I recommend creating 3 divs and in those divs put your text. Place the 3 divs inside another div container and give THAT container display flex so that thereby you can apply the appropriate flex properties to space out your three boxes evenly. THAT container I placed along with the location banner container inside the overall location parent container to which I have applied the background image. Additionally, looking at your code you are mixing position: relative with flexbox which probably is also what is causing the problems you are dealing with there. Choose one or the other…but being that this is a project where we need to showcase our prowess with flexbox :wink: I recommend using flexbox. Not that you cannot use position: relative at all, just that I wouldn’t use it under the same ruleset as you have in your css code.

  • Forgot to mention, for the Tea of the Month section, I made the width size 1100px but in reality I could’ve made it to 1000px width and still have all five teas fit in exactly as in the project solution. Only reason I made it 1100px width was so that I could combine the Tea of the Month parent container and Location parent container styles together. At 1000px width, the Location parent container cannot fit all three black boxes as it shows in the solution but at 1100px it can. So, seeing as how I get the same result whether I make my Tea parent container 1000px or 1100px, to satisfy the solution I just made bot the Tea parent container and Location parent container 1100px under the same ruleset.

Last thing, still working on the code for this project…just a few extra things I need to add like the image captions in my html code. Also, I still need to figure out how to incorporate more of the flex theories we learned for this project such as flex-shrink and etc. Still have more work to do but for now this is good enough for me. Will continue to perfect my code shortly. Let me know if you have any other suggestions as well…I’m still learning myself!

Well, hope this helps. I’ll will share my code below.

David

1 Like
The Tea Cozy
<main>
    <div class="jumbotron">
        <div class="mission_banner">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>
    <div class="tea_of_month">
        <div class="month_banner">
            <h2>Tea of the Month</h2>
            <h4>What's sleeping at The Tea Cozy?</h4>
        </div>
        <div class="tea_container">
            <div class="tea">
                <img src="images/berryblitz.jpg">
                <h4><a href="#">Fall Berry Blitz Tea</a></h4>
            </div>
            <div class="tea">
                <img src="images/spiced_rum.jpg">
                <h4><a href="#">Spiced Rum Tea</a></h4>
            </div>
            <div class="tea">
                <img src="images/donut.jpg">
                <h4><a href="#">Seasonal Donuts</a></h4>
            </div>
            <div class="tea">
                <img src="images/myrtle_ave.jpg">
                <h4><a href="#">Myrtle Ave Tea</a></h4>
            </div>
            <div class="tea">
                <img src="images/bedford_bizarre.jpg">
                <h4><a href="#">Bedford Bizarre Tea</a></h4>
            </div>
        </div>
    </div>
    <div class="cozy_locations">
        <div class="location_banner">
            <h2>Locations</h2>
        </div>
        <div class="location_container">
            <div class="location">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="location">
                <h3>East Bayside</h3>
                <h4>3433 Phisherman's Avenue</h4>
                <h4>(Northwest Corner)</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="location">
                <h3>Oakdale</h3>
                <h4>515 Crescent Avenue</h4>
                <h4>Second Floor</h4>
                <h4>Portland, Maine</h4>
            </div>
        </div>
    </div>
</main>

<footer>
    <div class="cozy_foot">
        <h2>The Tea Cozy</h2>
        <h5><a href="mailto:[email protected]">[email protected]</a></h5>
        <h5><a href="tel:917-555-8904">917-555-8904</a></h5>
    </div>
    <div class="copyright"><h5>copyright The Tea Cozy 2023</h5></div>
</footer>

/I placed my CSS code here since I cannot reply to your post more than 3 times******/

/******************** GLOBAL RULES ********************/
body {
margin: 30px auto;
width: 1300px;
min-width: 700px;
font-family: Helvetica, sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
}

h4 a:link, h4 a:visited {
color: seashell;
transition: ease-out 0.3s;
}

h4 a:hover {
color: rgb(255, 200, 161);
font-size: 24px;
transition: 0.2s;
cursor: pointer;
}

h2, h3, h4, h5 {
text-align: center;
margin: 10px 0;
}

h5 a:link, h5 a:visited {
color: seashell;
transition: ease-out 0.3s;
}

h5 a:hover {
color: rgb(255, 200, 161);
font-size: 20px;
transition: 0.2s;
cursor: pointer;
}

h2, h3, h4, h5 {
text-align: center;
margin: 10px 0;
}

/******************** HEADER ********************/
header {
display: flex;
justify-content: space-between;
margin: 0 10px;
height: 70px;
border-bottom: 1px solid seashell;
}

#logo img {
height: 50px;
/border: solid 1px white;/
padding: 5px;
transition: ease-out 0.3s;
}

#logo img:hover {
height: 54px;
box-shadow: 0 0 10px rgb(255, 200, 161);
transition: 0.2s;
}

nav {
width: 400px;
}

ul {
display: flex;
margin: auto;
padding: 0;
height: 50px;
justify-content: space-between;
align-items: center;
list-style: none;
}

/******************** MAIN ********************/
.jumbotron {
display: flex;
margin: 0 auto;
width: 1200px;
height: 700px;
background-image: url(images/mission_background.jpg);
background-repeat: no-repeat;
}

.tea_of_month, .cozy_locations {
margin: 0 auto;
padding-top: 50px;
width: 1200px;
height: 700px;
}

.cozy_locations {
height: 500px;
/This is to override the 700px height in ruleset above/
}

.cozy_locations {
background-image: url(images/locations_background.jpg);
background-repeat: no-repeat;
}

.mission_banner {
align-self: center;
}

.mission_banner {
display: flex;
flex-direction: column;
justify-content: center;
background-color: black;
width: 1200px;
height: 100px;
}

.tea_container, .location_container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 15px auto;
width: 1100px;
}

.tea {
margin: 10px;
width: 300px;
}

.tea img {
width: 300px;
height: 200px;
}

.location {
display: flex;
flex-flow: column;
justify-content: space-between;
margin: 15px 20px;
box-sizing: border-box;
width: 300px;
height: 300px;
padding: 15px 0;
background-color: black;
}

/******************** FOOTER ********************/
.cozy_foot {
display: flex;
flex-flow: column;
justify-content: space-between;
height: 200px;
}

.copyright {
margin-left: 20px;
}

.copyright h5 {
text-align: left;
}

EDIT:

Researching a little more…I think you can use position: relative with flexbox but it has to be applied to a child container within a flexbox parent. If you apply position: relative along with flexbox to the same container it will probably cause conflicts. Not sure on this though. But I always try to use one or the other. I’m sure there are situations where using position: relative trumps using flexbox but I feel that using flexbox in this particular project is better and easier for obtaining the results this project requires. But I’m pretty sure you can still achieve the same results using position: relative. You would probably have to use the top, bottom, left, and right css position properties with other combinations.