Tea Cozy Project CSS

Hello guys,

I have just completed the project listed in the title. But I can’t help but get the feeling I just botched my way through it. I used any trick I could think of to get everything into position and looking how it should but I have no idea how to tweak the position of various flex box containers accurately or measure the amount of pixels as needed between each container.

I have included the spec-sheet for the project and my sloppy code (both html and css). I am open to all the criticism you have.

Thanks!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta lang="eng">
    <meta name="description" content="Tea Cozy. Free range, fair trade and organic tea.">
    <meta name="keywords" content="Tea, Cozy, Free Range, Fair Trade, Organic, Steeping, Donut">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Cozy</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<!---------------------------------------------------------------------------------->


<header class="header">
    <div class="tealogo">
        <img src="resources/images/img-tea-cozy-logo.png" alt="Tea Cozy Logo">
    </div>

    <div class="headerlist">
       <h4>Mission</h4>
       <h4>Featured Tea</h4>
       <h4>Locations</h4>
    </div>
</header>


<!---------------------------------------------------------------------------------->


<main>
    
    <div class="missioncontainer">
        <div class="missiontext">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

    

    <div class="teamonth">
        <div class="teamonthtext">
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
        </div>

        <div class="teamonthcontainer">
            <div class="imgcontainer1"><img src="resources/images/img-berryblitz.jpg" alt="Image of Fall Berry Blitz Tea"></div>
            <div class="imgcontainer2"><img src="resources/images/img-spiced-rum.jpg" alt="Image of Spiced Rum Tea"></div>
            <div class="imgcontainer3"><img src="resources/images/img-donut.jpg" alt="Image of Seasonal Donut"></div>
            <div class="imgcontainer4"><img src="resources/images/img-myrtle-ave.jpg" alt="Image of Myrtle Ave Tea"></div>
            <div class="imgcontainer5"><img src="resources/images/img-bedford-bizarre.jpg" alt="Image of Bedford Bizarre Tea"></div>
        </div>
    </div>

    <div class="locations">

        <div class="locationstext">
          <h2>Locations</h2>  
        </div>

        <div class="locationscontainer">
        <div class="downtowncontainer">
          <h3>Downtown</h3>
          <p>384 West 4th St</p>
          <p>Suite 108</p>
          <p>Portland, Maine</p>  
        </div>

        <div class="baysidecontainer">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>(Northwest Corner)</p>
            <p>Portland, Maine</p>  
          </div>

          <div class="oakdalecontainer">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue</p>
            <p>Second Floor</p>
            <p>Portland, Maine</p>  
          </div>
    </div>

    <div class="teacozycontact">
        <h2>The Tea Cozy</h2>
        <h5>contact@theteacozy.com</h5>
        <h5>917-555-8904</h5>  
      </div>
      </div>

</main>


<!---------------------------------------------------------------------------------->


<footer class="footer">
    <div class="copyright">
        <h5>copyright The Tea Cozy 2017</h5>
    </div>
</footer>


<!---------------------------------------------------------------------------------->
</body>
</html>
html {
    font-size: 18px;
}

* {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

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

.header {
    display: flex;
    position: fixed;
    padding-top: 9px;
    padding-bottom: 9px;
    background: black;
    width: 100%;
    height: 69px;
    z-index: 2;
    border-bottom: 1px solid seashell;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.35em;
}

.tealogo img {
    display: flex;
    position: relative;
    padding-top: 9px;
    padding-left: 10px;
    height: 50px;
    width: 167px;
    
}


.headerlist {
    display: flex;
    width: 450px;
    height: 69px;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 9px;
    padding-right: 10px;
    text-decoration: underline;
    font-weight: lighter;
    padding-right: 1.5rem;
}

.missioncontainer {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-image: url(resources/images/img-mission-background.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: 1200px 700px;
    height: 700px;
    width: 100%;
}

.missiontext {
    background: black;
    display: flex;
    flex-flow: column;
    padding: 5px 5px;
    position: absolute;
    width: 1200px;
    height: 140px;
    align-content: center;
    justify-content: space-around;
    margin: 0 auto;
}


.teamonth {
 display: flex;
 position: relative;
 flex-direction: column;
 width: 100%;
 height: 700px;
 top: 100px;
 align-items: center;
 justify-content: space-evenly;
}


.teamonthtext {
    background: black;
    display: flex;
    flex-flow: column;
    padding: 5px 5px;
    position: relative;
    justify-content: space-around;
    align-content: center;
    width: 1000px;
    height: 140px;
    
}

.teamonthcontainer {
    display: flex;
    position: relative;
    align-content: center;
    justify-content: space-evenly;
    width: 1000px;
    height: 600px;
}

.imgcontainer1 {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
    
}

.imgcontainer1 img {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
    left: 150px;
}

.imgcontainer2 {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
    
}

.imgcontainer2 img {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
    left: 200px;
}

.imgcontainer3 {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
    
}

.imgcontainer3 img {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
    left: 250px;
}

.imgcontainer4 {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
    top: 300px;
    right: 300px;
}

.imgcontainer4 img {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
}

.imgcontainer5 {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
    top: 300px;
    right: 250px;
   
}

.imgcontainer5 img {
    display: flex;
    position: relative;
    width: 200px;
    height: 200px;
}

.locations {
    display: flex;
    position: relative;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background-image: url(resources/images/img-locations-background.jpg);
    background-position-y: 10em; 
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: 1200px 800px;
    height: 800px;
    width: 100%;
    top: 200px;
}

.locationstext {
    display: flex;
    position: relative;
    top: 6em;  
}

.locationscontainer {
    display: flex;
    position: relative;
    flex-flow: row;
    justify-content: space-evenly;
    align-items: center;
    height: 300px;
    width: 1000px;
    top: 8em;
}

.downtowncontainer {
    display: flex;
    flex-direction: column;
    background: black;
    width: 300px;
    height: 300px;
    align-items: center;
    justify-content: space-evenly;
}

.baysidecontainer {
    display: flex;
    flex-direction: column;
    background: black;
    width: 300px;
    height: 300px;
    align-items: center;
    justify-content: space-evenly;
}


.oakdalecontainer {
    display: flex;
    flex-direction: column;
    background: black;
    width: 300px;
    height: 300px;
    align-items: center;
    justify-content: space-evenly;
}

.teacozycontact {
    background: black;
    display: flex;
    flex-flow: column;
    position: relative;
    width: 100%;
    height: 200px;
    justify-content: space-between;
    align-items: center;
    top: 19em;
}

.footer {
    display: flex;
    position: relative;
    height: 50px;
    width: 1000px;
    top: 25em;
    left: 20px;
}