Stuck on Tea Cozy project

Hi All!

I am currently having issues in completing the project above:

1 - I cannot display inline-flex the divs within the container div.

2- I cannot center the 3 divs within the ‘bottom’ div, for some reason it comes out all quirky.

Any help is 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 href="style.css" rel="stylesheet"> <title>Tea Cozy</title> </head> <body> <div class="nav"> <div class="logo"> <img src="logo.png"> </div> <div class="links"> <a href="#">Mission</a> <a href="#">Featured Tea</a> <a href="#">Locations</a> </div> </div> <div class="main"> <div class="mission"> <div class="banner"> <h2 class="banner"><strong>Our Mission:</strong></h2> <h4 class="banner"><strong>Artisanally Curated,Free range,Sustainable,Small batch,Fair Trade, Organic Tea</strong></h4> </div> </div> </div> <div class="container"> <h4><strong>Tea of The Month</strong></h4> <h6><strong>What's sleeping at Tea Cozy?</strong></h6> <div class="tea"> <figure class="pic"> <img src="berryblitz.jpg"> <figcaption>Fall Berry Blitz Tea</figcaption> </figure> </div> <div class="tea"> <figure class="pic"> <img src="spiced_rum.jpg"> <figcaption>Spiced Rum Tea</figcaption> </figure> </div> <div class="tea"> <figure class="pic"> <img src="donut.jpg"> <figcaption>Seasonal Donuts</figcaption> </figure> </div> <div class="tea"> <figure class="pic"> <img src="tea.jpg"> <figcaption>Myrtle Ave Tea</figcaption> </figure> </div> <div class="tea"> <figure class="pic"> <img src="bedford_bizarre.jpg"> <figcaption>Bedford Bizzarre Tea</figcaption> </figure> </div> </div> <div div class="location"> <div class="bottom"> <div class="downtown"> <h3 class="downtown">Downtown</h3> <p class="downtown">384 4th St</p> <p class="downtown">384 4th St</p> <p class="downtown">384 4th St</p> </div> <div class="east"> <h3 class="east">East Bayside</h3> <p class="east">3433 Phisherman's Avenue</p> <p class="east">(Northwest Corner)</p> <p class="east">Portland, Maine</p> </div> <div class="oak"> <h3 class="oak">Oakdale</h3> <p class="oak">515 Cresent Avenue</p> <p class="oak">Second Floor</p> <p class="oak">Portland, Maine</p> </div> </div> </div> <div class="contacts"> <h1>The Tea Cozy</h1> <h5 class="contacts">contact@theteacozy.com</h5> <a class="contacts" href="#">917-555-9804</a> <p class="copyright">Copyright the Tea Cozy</p> </div> </body> </html>

body {
background-color:black;
width: 1300px;
}

body div{
margin: 2px;
display: flex;

}
.nav{
display: flex;
border-bottom: 1px solid seashell;
width: 100%;
height: 69px;
position: fixed;
background-color: black;
justify-content: end;
}
.logo img{
height: 50px;
margin: 5px;
}

.nav .links{
margin-left: auto;

}
.links a {
font-family: Helvetica;
color: seashell;
text-decoration: underline;
margin: 15px 20px;
text-align: center;
font-size: 22px;
}

.main{
display: flex;
flex-flow: column wrap;
overflow-x: hidden;
align-content: center;
margin-left: 27px;

}

.mission{
background-image: url(misson_background.jpg);
height: 700px;
width:1200px;
display: flex;
flex-flow: column wrap;
text-align: center;

}

.banner{
display: flex;
flex-flow: column wrap;
text-align: center;
margin: auto;
font-family: Helvetica;
font-weight: 700;
color: seashell;
background-color: black;
width: 1200px;
line-height: 50px;
letter-spacing: 2px;
}

.container{
width: 1000px;
display: flex;
flex-flow: column wrap;
text-align: center;
color:seashell;
font-family: Helvetica;
letter-spacing: 2px;
display: inline-flex;

}

.tea{
align-content: center;
text-align: center;
color:seashell;
font-family: Helvetica;
letter-spacing: 2px;

}

.pic img{
width: 300px;
height: 200px;
}

.pic figcaption{
position: relative;
display: flex;
text-align: center;
color:seashell;
font-family: Helvetica;
letter-spacing: 2px;
}

.location{
height: 500px;
background-image: url(background.jpg);
background-size: contain;
width: 1200px;
display: flex;
flex-flow: row wrap;
overflow-x: hidden;
align-content: center;
margin-left: 50px;
}

.downtown{
background-color: black;
display: inline-flex;
width: 300px;
color: seashell;
text-align: center;
flex-flow: column wrap;
font-family: Helvetica;
font-weight: bold;
}

.east{
background-color: black;
display: inline-flex;
width: 300px;
color: seashell;
text-align: center;
flex-flow: column wrap;
font-family: Helvetica;
font-weight: bold;
margin-left: 40px;
}

.oak{
background-color: black;
display: inline-flex;
width: 300px;
color: seashell;
text-align: center;
flex-flow: column wrap;
font-family: Helvetica;
font-weight: bold;
margin-left: 40px;
}

.bottom{
display: inline-flex;
margin-left: 10%;
text-align: center;
}

.contacts{
font-family: Helvetica;
color: seashell;
font-weight: bold;
margin: 15px 20px;
text-align: center;
font-size: 22px;
display: flex;
flex-flow: column wrap;

}

.contacts .copyright{
font-family: Helvetica;
color: seashell;
margin: 15px 20px;
text-align: left;
font-size: 18px;
display: flex;
flex-flow: column wrap;
}

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.