Does anyone know why my footer isn't showing up as described by my css?-CodePudding

I am currently going through the codecademy course and am a bit stuck on this last bit of the tea cozy project. I am trying to solve this with flexbox only and my understanding of it is still a bit fuzzy but I'd like to create a footer with 100% width with a couple of div blocks for the contact info and the copyright. If anyone has any idea what I can do to improve this code please let me know :) Any help would be appreciated. Sorry for all the code but I'm not quite sure where I've gone wrong so thought it better to leave it all.

html {
    font-family: helvetica, arial, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

body {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;

}

header {
    height: 69px;
    position: fixed;
    border-bottom: 1px solid seashell;
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    justify-items: center;
    z-index: 10;
    background-color: black;
}

header .logo {
    background-image: url(../images/tea-cozy-logo.png);
    height: 50px;
    width: 155px;
    justify-content: space-around;
    background-size: contain;
    margin: 9.5px 10px;
    
}


header .menu {
    display: inline-flex;
    flex-wrap: wrap;
    width: 400px;
    justify-content: space-around;
    text-decoration: underline;
}

header .menu .menu-item {
    flex-flow: wrap row;
    
}


a {
    color: white;
}


a:hover {
    text-decoration: none;
    cursor: pointer;
}

.mission {
    height: 700px;
    width: 1200px;
    display: flex;
    position: relative;
    background-image: url(../images/mission-background.jpg);
    top: 70px;
    flex-direction: column;
    justify-content: center;

}

.mission .mission-info {
    background-color: black;
    text-align: center;
    width: 100%;
    height: 135px;
    opacity: 0.9;
}

.tea-of-the-month {
    width: 1050px;
    display: flex;
    flex-flow: wrap column;
    justify-content: center;
    color: seashell;
    position: relative;
    margin-top: 100px;

}

.tea-of-the-month .title {
    display: flex;
    flex-flow: wrap column;
    justify-content: center;
    text-align: center;
    width: 1050px;
    height: 200px;
}


.tea-of-the-month .tea-images {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
    width: 1050px;
    height: 500px;
}



.tea-of-the-month .tea-images .berry-blitz, .tea-of-the-month .tea-images .spiced-rum, .tea-of-the-month .tea-images .donut, .tea-of-the-month .tea-images .myrtle-ave, .tea-of-the-month .tea-images .bizarre-tea {
    display: flex;
    width: 350px;
    height: 280px;
    flex-grow: 0;
    flex-flow: wrap row;
    justify-content: center;
}


.locations {
    display: inline-flex;
    justify-content: center;
    flex-flow: wrap column;
    width: 1200px;
    background-image: url(../images/locations-background.jpg);
    height: 500px;
    right:60px;
    align-items: center;
    position: relative;
    top: 140px;
    margin-bottom: 140px;

}

.locations .locations-title {
    display: flex;
    height: 35px;
}


.locations .locations-info {
    display: flex;
    flex-flow: wrap column ;
    justify-content: center;
    align-items:center ;
    width: 1020px; 
    z-index: 1;
    height: 400px;
    top: 100px;
    text-align: center;
    line-height: 60px;
}

.locations .locations-info .downtown {
    width: 300px;
    min-height: 300px;
    background-color: black;

}

.locations .locations-info .east-bayside {
    width: 300px;
    min-height: 300px;
    background-color: black;

}

.locations .locations-info .oakdale {
    width: 300px;
    min-height: 300px;
    background-color: black;
}



body > footer {
    height: 240px;
    width: 100%;
    display: inline-flex;
    border: 1px dotted white;
    justify-content: center;
    flex-flow: wrap row;
}

footer .contact {
    width: 300px;
    text-align: center;
    display:flex;
    justify-content: center;
    flex-flow: wrap row;
    align-items: center;
    line-height: 5px;

}

footer .copyright {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    border: 1px solid white;
}

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  
  <link rel="stylesheet" href="./resources/css/style.css" type="text/css" />
</head> 
<body>
    <header>
        <div >
        </div>

        <div >
            <div >
                <p><a href="#">Mission</a></p>
            </div>

            <div >
                <p><a href="#">Featured Tea</a></p>
            </div>

            <div >
                <p><a href="#">Locations</a></p>
            </div>
        </div>
    </header>


    <div >
        <div >
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Fair Trade, Organic Tea</h4>
        </div>
    </div>


    <div >
        <div >
            <h2>Tea of the Month</h2>
            <h4>Whats Steeping at the Tea Cosy?</h4>
        </div>

        <div >
            <div >
                <img src="./resources/images/berryblitz.jpg" height="200" width="300"/>
                <h4>Fall Berry Blitz Tea</h4>
            </div>

            <div >
                <img src="./resources/images/spiced-rum.jpg" height="200" width="300"/>
                <h4>Spiced Rum Tea</h4>
            </div>

            <div >
                <img src="./resources/images/donut.jpg" height="200" width="300"/>
                <h4>Seasonal Donuts</h4>
            </div>

            <div >
                <img src="./resources/images/myrtle-ave.jpg" height="200" width="300"/>
                <h4>Myrtle Ave Tea</h4>
            </div>

            <div >
                <img src="./resources/images/cupoftea.jpg" height="200" width="300"/>
                <h4>Bedford Bizarre Tea</h4>
            </div>
        </div>

    <div >
        <div >
            <h2>Locations</h2>
        </div>

        <div >

            <div >
                <h3>Downtown</h3>
                <p>384 West 4th St <br> Suite 108 <br>  Portland, Maine</p>
            </div>
            <div >
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue <br> (Northwest Corner) <br> Portland, Maine</p>
            </div>
            <div >
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue <br> Second Floor <br> Portland, Maine</p>
            </div>
        </div>

        
    </div>


   
    <footer>
       
    </footer>
    
</body>
</html>

CodePudding user response：

You are missing a closing div, and your rule body > footer not applying.

    <div >
        <img src="./resources/images/cupoftea.jpg" height="200" width="300"/>
        <h4>Bedford Bizarre Tea</h4>
    </div>
</div>
// Here we added a div
</div>