title: Images and captions don't align
body: <p>I am trying to get a section of a page to look like this
  <img src="https://i.stack.imgur.com/bWgeU.jpg" alt="How it's supposed to look" /></p>
  <p>However I keep getting stuck with it looking like this
  <img src="https://i.stack.imgur.com/X6npC.jpg" alt="enter image description here" /></p>
  <p>Please help still fairly new!!</p>
  <p><strong>HTML</strong></p>
  <pre><code>  &lt;h2&gt;Tea of the Month&lt;/h2&gt;
      &lt;h4&gt;What's Sleeping at The Tea Cozy?&lt;/h4&gt;
  
      &lt;div class=&quot;tea&quot;&gt;
              &lt;div class=&quot;images&quot;&gt;
                      &lt;img src=&quot;https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg&quot; alt=”berryblitz”&gt;
                  &lt;p&gt;Fall BerryBlitz Tea &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;images&quot;&gt;
                  &lt;img src=&quot;https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg&quot; alt=”spicedrum”&gt;
              &lt;p&gt;Fall BerryBlitz Tea &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;images&quot;&gt;
              &lt;img src=&quot;https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg&quot; alt=”Donuts”&gt;
          &lt;p&gt;Fall BerryBlitz Tea &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;images&quot;&gt;
              &lt;img src=&quot;https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg&quot; alt=”myrtleave”&gt;
          &lt;p&gt;Fall BerryBlitz Tea &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;images&quot;&gt;
          &lt;img src=&quot;https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg&quot; alt=”myrtleave”&gt;
      &lt;p&gt;Fall BerryBlitz Tea &lt;/p&gt;
  &lt;/div&gt;
  
  
      
      &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.tea{   width: 1000px;
       height: auto;   
       margin: 10px auto; 
  }  
  
  .images{ height: 200px; 
           width: 300px;    
           display:inline-flex; 
          margin: 10px 10px; 
  }
  </code></pre>
  <p>I tried a couple of different things but I am at a lose. Any help or advice would be appreciated</p>