Tea Cozy Project

Hello. Needing someone to take a look at my code for this project. It doesn’t look like things are quite centered properly. Any feed back is much appreciated.

<!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" href="Resources/stylesheets/tee-cz.css" type="text/css"/>
    
</head> 
    <body>
        <header class="flex-container">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"/>
            <nav>
                <span><a href="#mission">Mission</a></span>
                <span><a href="#Featured Tea">Featured Tea</a></span>
                <span><a href="#Locations">Locations</a></span>
            </nav>
        </header>

        <div class="main">

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

        <div id="store">
            <h2> Tea of the Month </h2>
            <h4> What's Steeping at The Tea Cozy </h4>
            <div class="flex-container items">
            <div class="item">
                <img src="images/img-berryblitz.jpg"/>
                <span> Fall Berry Blitz </span>
            </div>
            <div class="item">
                <img src="images/img-spiced-rum.jpg"/>
                <span> Spiced Rum Tea </span>
            </div>
            <div class="item">
                <img src="images/img-donut.jpg"/>
                <span> Seasonal Doughnuts </span>
            </div>
            <div class="item">
                <img src="images/img-myrtle-ave.jpg"/>
                <span> Myrtle Ave Tea </span>
            </div>
            <div class="item">
                <img src="images/img-bedford-bizarre.jpg"/>
                <span> Bedford Bizare Tea </span>
            </div>
        </div>

        <div id="locations">
            <h2>Locations</h2>
            <div class="flex-container locations">
                <div class="location">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>           
                <div class="location">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Ave</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>Oakdale</h3>
                    <p>515 Cresent Ave</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>           
           </div>
        <div id="contact">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-555-8904</h5>
        </div>

        <footer>
            <h5>copyright The Tea Cozy 2017</h5>
        </footer>
    
    
</body>
</html>
body {
    margin: 0;
    font-family: "Helvetica", sans-serif;
    color: seashell;
    background-color: black;
    font-size:  22px;
    text-align: center;
    opacity: 0.9;
}

a {
    color: seashell;
}

h2,
h3,
h4 {
    margin: 0;
    padding: 10px;
}

.flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

header {
    width: 100%;
    z-index: 1;
    height: 69px;
    background-color: black;
    border-bottom: 1px solid seashell;
    align-items: center;
} 

header img {
    height: 50px;
    padding-left: 10px;
}

nav {
    text-align: right;
    flex-grow: 1;
}

nav span {
    display: inline-block;
    padding: 20px 10px;
}

#mission {
    height: 700px;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 70px;
}

#mission .content {
    margin: auto;
    background-color: black;
    width: 100%;

}

#store {
    height: 700px;
    width: 1000px;
    margin: auto;
    padding-top: 70px;
}

.item {
    padding: 5px;

}

.item img {
    height: 200px;
    margin: 10px;
    display: block;
}

.item span {
    display: block; 
    padding: 5px;
    font-weight: bold;  
    text-align: center;
}

.flex-container.locations {
    padding-top: 5px;
}

#locations {
    height: 500px;
    width: 1100px;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
    padding-top: 70px;
    margin: 70px auto;
}

#locations .flex-container {
    margin: auto;
    width: 1100px;
}

.location {
    opacity: 1.0;
    padding: 10px;
    margin: 5px 20px;
    background-color: black;
    flex-basis: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#contact {
    height: 200px;
    margin: 150px auto;
}

footer {
    text-align: left;
    margin-left: 20px;
}

Hi there!

Welcome to the forums!

You’re experiencing issues with your alignment because the locations, contact, and footer are all wrapped within the #store div. Once that nesting is fixed, the design is centered. :slight_smile:

Thank you so much! I finally got it!

1 Like