Tea Cozy project

Get Help
#1

Hi,

I would like some feedback on the Tea Cozy project I just finished (https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox/projects/tea-cozy).

I had some trouble in positioning the location section, mainly the text margin with the address cards. Perhaps someone could suggest some tips

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<title>Tea Cozy</title>

</head>

<body>
<header>
<div class="container">

    <img src="images\logo.png" alt="company logo" id="logo">


    <nav>
        <ul>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Featured Tea</a></li>
            <li><a href="#">Locations</a></li>
        </ul>
    </nav>

</div>

</header>
      
<div class="hero">
<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="monthtitle">
<h2>Tea of the Month</h2>
<h4>What's Steeping at Tea Cozy</h4>
</div>


<div class="month">
    <div class="caption">
    <div class="card" id="card1"></div><h4>Fall Berry Blitz Tea</h4>
    </div>
    <div class="caption">
    <div class="card" id="card2"></div><h4>Spiced Rum Tea</h4>
    </div>
    <div class="caption">
    <div class="card" id="card3"></div><h4>Seadonal Donuts</h4>
    </div>
    <div class="caption">
    <div class="card" id="card4"></div><h4>Myrtle Ave Tea</h4>
    </div>
    <div class="caption">
    <div class="card" id="card5"></div><h4>Bedford Bizarre Tea</h4>
    </div>

</div>

<div class="loca">
    <div class="child"><h2>Locations</h2></div>
    <div class="child"><h3>Downtown</h3>
        <h4>384 West<br>Suite 108<br>Portland, Maine</h4></div>
    <div class="child"><h3>East Bayside</h3>
        <h4>3433 Phisermans's Avenue<br>(Northwest Corner)<br>Portland, Maine</h4></div>
    <div class="child"><h3>Oakdale</h3>
        <h4>515 Crescent Avenue<br>Second Floor<br>Portland, Maine</h4></div>
    
  </div>

<div class ="footercontainer">
    <h2>The Tea Cozy</h2>
    <h5>contact@teacozy.com</h5>
    <h5>917-55-8904</h5> 
    <div class="copyright"><h5>copyright The Tea Cozy 2017</h5></div>
</div>

</body>

</html>

body {
    color: seashell;
    opacity: 0.9;
    font-family: Helvetica;
    background-color: black;
    font-size: 22px;
}

.container {
    height: 69px;
    border-bottom: solid seashell 1px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#logo {
        margin: 0px 0px 0px 10px;
        height: 50px;
        width: auto;
}

nav ul {
    display: flex;
    justify-content: space-between;
    list-style-type:none;
  }

  nav li {
    padding: 0 15px 0 0;
  } 
        
nav a {
    color: seashell;
    text-decoration: underline;
}
header {
    background-color: black;
    position: fixed;
    width: 100%;
    top: 0;
    
}

.hero {
    display: flex;
    background-image: url("images/img-mission-background.jpg");
    height: 700px;
    width: 1200px;
    margin: 69px auto 0 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#mission {
    background-color: black;
    width: 1200px;
}
.monthtitle {
    width: 1000px;
    margin: 10px auto;
    text-align: center;
}
.month {
    width: 1000px;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.card {
    width: 300px;
    height: 200px;
    margin: 10px;
    transition: width 0.7s, height 0.7s;
}
.card:hover {
    width: 320px;
    height: 220px;
}

#card1 {
    background-image: url("images/img-berryblitz.jpg");
    background-size: 100% 100%;
}

#card2 {
    background-image: url("images/img-spiced-rum.jpg");
    background-size: 100% 100%;
}

#card3 {
    background-image: url("images/img-donut.jpg");
    background-size: 100% 100%;
}

#card4 {
    background-image: url("images/img-myrtle-ave.jpg");
    background-size: 100% 100%;
}

#card5 {
    background-image: url("images/img-bedford-bizarre.jpg");
    background-size: 100% 100%;
}

.card h4 {
    top: 100px;
}
.loca {
    display: flex;
    justify-content: center;
    background-size: 100%;
    height: 500px;
    width: 1200px;
    flex-wrap: wrap;
    background-image: url("images/img-locations-background.jpg");
    margin: 0 auto;
    align-content: center;
  }
  
  .child {
    text-align: center;
  }
  
  .child:first-child {
    width: 100%;
  }
  
  .child:not(:first-child) {
    background-color: black;
    line-height: 55px;
    height: 300px;
    width: 300px;
    margin: 0 20px 0 20px;
  }

  .footercontainer {
    display: flex;
    height: 200px;
    width: 100%;
    align-content: center;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
  }

  .copyright {
    display: flex;
    margin-left:20px;
    text-align: left;
  }