Tea Cozy issues with flex? At end?

Redid my Tea Cozy project completely form yesterdays blunder mess. I feel like other than some cosmetic stuff through the first couple sections it looks better. My issue is at the end. I’m having an issue with I’m assuming the flex box layout. I need my 3 “locations” boxes lined up across the top of that pic, and the “contact” info to cover the entire bottom. Also for some reason the background pic for locations shifted up. NO idea why that happened when initially it looked good. Again I’m assuming it’s flex related, but I feel like I’ve tried so many combos of flex, flex-direction, and position stuff that I can obviously think of. I feel like I did the parent/child classes the best I could. Not the prettieset I know! TIA!

<!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" type="text/css" href="styles.css" /> <title>Tea Cozy</title> </head> <body> <!-- NAVIGATION SECTION --> <nav> <ul class="container"> <img src="images/logo.png" class="logo" /> <li><a href="#" class="link">Mission</a></li> <li><a href="#" class="link">Featured Tea</a></li> <li><a href="#" class="link">Locations</a></li> </ul> </nav> <!-- MISSION SECTION --> <div class="mission"> <img src="images/background.jpg" class="background" /> <div class="missiontext"> <h2>Our Mission</h2> <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4> </div> </div> <!-- TEA OF THE MONTH SECTION --> <div> <h2>Tea of the Month</h2> <h4>What's Steeping at The Tea Cozy?</h4> <div class="boxrow1"> <div> <img src="images/berry blitz.jpg" class="row1" /> <h4>Fall Berry Blitz Tea</h4> </div> <div class="blitz"> <img src="images/spiced rum.jpg" class="row1" /> <h4>Spiced Rum Tea</h4> </div> <div class="blitz"> <img src="images/donut.jpg" class="row1" /> <h4>Seasonal Donuts</h4> </div> </div> <div class="boxrow2"> <div> <img src="images/myrtle ave.jpg" class="row2" /> <h4>Myrtle Ave Tea</h4> </div> <div> <img src="images/bedford bizarre.jpg" class="row2"s /> <h4>Bedford Bizarre Tea</h4> </div> </div> </div> <!-- LOCATIONS SECTION --> <div> <div class="locations"> <img src="images/locations.jpg" class="locimg" /> <div class="locrow1"> <h3>Downtown</h3> <h3>384 West 4th St</h3> <h3>Suite 108</h3> <h3>Portland, Maine</h3> </div> <div class="locrow1"> <h3>East Bayside</h3> <h3>3433 Phisherman's Avenue</h3> <h3>(Northwest Corner)</h3> <h3>Portland, Maine</h3> </div> <div class="locrow1"> <h3>Oakdale</h3> <h3>515 Crescent Avenue</h3> <h3>Second Floor</h3> <h3>Portland, Maine</h3> </div> <div> <div class="contact"> <h2>The Tea Cozy</h2> <h5>[email protected]</h5> <h4>917-555-8904</h4> </div> </div> </div> </div> <!-- FOOTER SECTION --> <footer> </footer> </body> </html>
* { font-family: Helvetica; font-size: 22px; color: seashell; background-color: black; opacity: 0.9; } .logo { height: 50px; margin-right: auto; position: relative; right: 30px; } .container { list-style: none; display: flex; border-bottom: 1px solid seashell; height: 69px; } .link { padding-right: 30px; position: relative; top: 10px; } .mission { display: flex; position: relative; align-items: center; } .background { width: 1200px; height: 700px; margin: 0 auto; display: block; position: relative; top: -22px; } .missiontext { display: flex; position: absolute; z-index: 100; flex-direction: column; justify-content: center; width: 100%; opacity: 1; } h2, h4 { text-align: center; } h2 { font-size: 28px; } .boxrow1 { display: flex; justify-content: center; } .row1 { height: 200px; width: 300px; margin: 15px; } .boxrow2 { display: flex; justify-content: center; } .row2 { height: 200px; width: 300px; margin: 15px; } .locations { display: flex; position: relative; align-items: center; width: 100%; height: 300px; } .locimg { position: absolute; } .locrow1 { display: flex; align-items: center; flex-container: wrap; margin: 20px; width: 300px; height: 300px; text-align: center; } .locations2 { height: 200px; margin: 0 auto; width: 75%; max-width: 1000px; display: flex; flex-wrap: wrap; }