Tea Cozy project issues

What’s up everyone! First time posting in here. I got the basic layout of this Tea Cozy project started, but I can’t seem to get flex and position elements to work for me. I’ve read through a bunch of other peoples threads, and I tried manipulating my code here and there to see if anything would remotely change. Well nothing did for the better. It’s been days now and I figured this was my next best step. My biggest issue so far has been at the end getting the locations to appear as the 3 boxes in a row on top of the image. CAN’T get that figured out for the life of me. ANY help on how terrible this looks and how I can fix it would be GREATLY 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"> <link rel="stylesheet" type="text/css" href="index.css" /> <title>Tea Cozy</title> </head> <body> <nav class="header"> <div class="nav"> <div class="nav1"> <img src="images/cozy_logo.png" alt="The Tea Cozy Logo" /> <div class="nav2"> <ul> <li>Mission</li> <li>Featured Tea</li> <li>Locations</li> </ul> </div> </div> </nav> <br> <div class="mission"> <div class="missioncon"> <img class="missionpic" src="images/img-mission-background.jpg" /> <h2 class="missionpic2">Our Mission</h2> <h4 class="missionpic3">Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4> </div> </div> <br> <div class="month"> <h2 class="h2">Tea of the Month</h2> <h4>What's Sleeping at The Tea Cozy?</h4> </div> <div class="teas"> <div class="blitz"> <img class="btt" src="images/img-berryblitz.jpg"/> <p>Fall Berry Blitz Tea</p> </div> <div class="rum"> <img class="srt" src="images/img-spiced-rum.jpg"/> <p>Spiced Rum Tea</p> </div> <div class="donuts"> <img class="sd" src="images/img-donut.jpg"/> <p>Seasonal Donuts</p> </div> </div> <div class="teas2"> <div class="myrtle"> <img class="mat" src="images/img-myrtle-ave.jpg"/> <p>Myrtle Ave Tea</p> </div> <div class="bizarre"> <img class="bbt" src="images/img-bedford-bizarre.jpg"/> <p>Bedford Bizarre Tea</p> </div> </div> <div class="locations"> <img class="locbgd" src="images/img-locations-background.jpg"/> <h2 class="h2">Locations</h2> <div class="block1"> <h3>Downtown</h3> <p>384 West 4th St</p> <p>Suite 108</p> <p>Portland, Maine</p> </div> <div class="block1"> <h3>East Bayside</h3> <p>3433 Phisherman's Avenue</p> <p>(Northwest Corner)</p> <p>Portland, Maine</p> </div> <div class="block1"> <h3>Oakdale</h3> <p>515 Crescent Avenue</p> <p>Second Floor</p> <p>Portland, Maine</p> </div> </div> </body> <foot> <div class="footer"> <h1>The Tea Cozy</h1> <h5><a href="[email protected].com">[email protected]</a></h5> <p>917-555-8904</p> <p>copyright The Tea Cozy 2017</p> </div> </foot> </html>
* { font-family: Helvetica; font-size: 22px; color: seashell; background-color: black; opacity: 0.9; } .header { height: 69px; } .nav { top: 0; right: 10%; display: inline-block; } .nav1 { height: 50px; margin-left: 10px; } .nav2 { text-align: right; display: inline-block; flex-direction: row; } .h2 { font-size: 28px; } .mission { position: relative; display: flex-wrap; } .missionpic { width: 1200px; margin: 0 50px; } .missioncon { text-align: center; display: flex; position: relative; } .missionpic2 { position: absolute; top: 45%; width: 1200px; text-align: center; opacity: 1; margin: 0 50px; font-size: 28px; } .missionpic3 { position: absolute; top: 50%; width: 1200px; text-align: auto; opacity: 1; margin: 0 50px; } .month { text-align: center; } .teas { display: flex; flex-direction: wrap; text-align: center; justify-content: center; margin: 10px; } .btt { height: 200px; width: 300px; margin: 10px; } .srt { height: 200px; width: 300px; margin: 10px; } .sd { height: 200px; width: 300px; margin: 10px; } .teas2 { display: flex; flex-direction: wrap; text-align: center; justify-content: center; margin: 10px; } .mat { height: 200px; width: 300px; margin: 10px; } .bbt { height: 200px; width: 300px; margin: 10px; } .locations { display: flex; position: relative; flex-flow: row; justify-content: space-evenly; align-items: center; } .locbcg { width: 100%; display: flex; position: relative; } .block1 { dislay: flex; position: relative; }

Hi there,

I see that you are having a similar problem to someone I helped recently. Take a look at this post

And let me know if it helps. If you have any other questions, please feel free to ask!

2 Likes