FlexBox items stuck in the center of the screen. Please help

Hey there,

I have tried to work out what’s wrong for some hours now, and I can’t see the forest for the trees. I am trying to set up a flex-box with two rows using wrap-around; however, the images are sitting in the center of the page, in a column, and when I try and change it to rows, nothing happens. I am really not sure what I am doing wrong. Any other feedback is also welcome.

/*Universal Statements */

html {
font-family: helvetica;
font-size: 22px;
color: seashell;
background-color:black;
opacity: 0.9;
width: 100%;
}
body {
font-family: helvetica;
font-size: 22px;
color: seashell;
background-color:black;
opacity: 0.9;
text-align: center;

}

h2 {
display: block;
}

h4 {
display: block;
}

/* Menu Bar*/

#teaCozyLogo {
height: 50px;
padding-left : 10px;
float: left;
}

.menuBar {
border-bottom: 1px solid seashell;
height: 59px;
display: fixed;
padding: auto;
justify-content: center;
}
.menuLinks {
font-weight: bold;
float: right;
}

/* Body */

.main {
opacity: 0.9;
width: 1200px;
margin: auto;
}

#ourMission {
background-image: url(“teaBackground.jpg”);
height: 700px;
padding-top: 70px;
width: 100%;
text-align: center;
align-content: center;

}

#ourMission .content {
background-color: black;
padding: auto;
width: 100%;
}

#monthPics img {
height: 200px;
width: 300px;
padding: 10px;
}

#monthPics div {
display: flex;
flex-wrap: wrap;

}

.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

#teaLink {
text-decoration: underline;
margin: 10px;
}

#missionLink {
text-decoration: underline;
margin: 10px;
}

#locationLink {
text-decoration: underline;
margin: 10px;

}
#copyRight {
text-align: left;
}

Tea Cozy
Mission Featured Tea Locations
   <div id= "ourMission" class = "flex-container">
     <div class= "content">
        <h2> Our Mission</h2>
        <h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
     </div> 
  </div>
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy</h4>
 <div id= "monthPics">
  <img src ="Resources/img-berryblitz.jpg" alt= "Berry Blitz Tea">
  <figcaption>Fall Berry Blitz Tea</figcaption>
  <img src ="Resources/img-spiced-rum.jpg" alt= "Spiced Rum Tea">
  <figcaption>Spiced Rum Tea</figcaption>
  <img src ="Resources/img-donut.jpg" alt = "Seasonal Donuts">
  <figcaption>Seasonal Donuts</figcaption>
  <img src ="Resources/img-myrtle-ave.jpg" alt= "Myrtle Ave Tea">
  <figcaption>Myrtle Ave Tea</figcaption>
  <img src ="Resources/img-bedford-bizarre.jpg" alt= "Bedford Bizarre Tea">
  <figcaption>Bedford Bizarre Tea</figcaption>
 </div>










contact@theteacozy.com
917-555-8904
copyright The Tea Cozy 2017

Hi adamwhite1828758154,

in your html <img>s and <figcaption>s should be within <figure> element:

  <figure>
    <img src ="Resources/img-berryblitz.jpg" alt= "Berry Blitz Tea">
    <figcaption>Fall Berry Blitz Tea</figcaption>
   </figure>
   <figure>
    <img src ="Resources/img-spiced-rum.jpg" alt= "Spiced Rum Tea">
    <figcaption>Spiced Rum Tea</figcaption>
   </figure>
   <figure>
    <img src ="Resources/img-donut.jpg" alt = "Seasonal Donuts">
    <figcaption>Seasonal Donuts</figcaption>
   </figure>
   <figure>
    <img src ="Resources/img-myrtle-ave.jpg" alt= "Myrtle Ave Tea">
    <figcaption>Myrtle Ave Tea</figcaption>
   </figure>
   <figure>
    <img src ="Resources/img-bedford-bizarre.jpg" alt= "Bedford Bizarre Tea">
    <figcaption>Bedford Bizarre Tea</figcaption>
   </figure>

in your style section at #monthPics div { display: flex; flex-wrap: wrap; } remove div selector and add justify-content: center; to declaration block:

#monthPics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}