title: Flexbox grid align images center
body: <p>I want to align the images and text in the centre using flexbox </p>
  
  <p>The image side by side and the text below the images</p>
  
  <p>It was working before, however all of a sudden the images are just placed on the left hand side.</p>
  
  <p>I have tried re-writing the HTML &amp; CSS code however I am still getting the same output</p>
  
  <p>I have no idea why it suddenly changed. </p>
  
  <p><a href="https://i.stack.imgur.com/bi5rS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bi5rS.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.buy-coffee-wrapper {
    margin-top: 50px;
    background-color: rgb(34, 25, 25);
  }
  
  .enjoy-home {
    text-align: center;
    padding-top: 25px;
    color: #fff;
    font-family: 'Lora', sans-serif;
    font-weight: normal;
  }
  
  .buy-coffee {
    margin-top: 20px;
    text-align: center;
    color: #fff;
    font-family: 'Multi', sans-serif;
  }
  
  .coffee-almond,
  .coffee-cookieDough,
  .coffee-vanilla {
    width: 50%;
    margin-left: 75px;
    margin-top: 50px;
  }
  
  .coffee-almond:hover,
  .coffee-cookieDough:hover,
  .coffee-vanilla:hover {
    border: 1px solid rgb(255, 255, 255);
    padding: 10;
  }
  
  .coffee-name,
  .coffee-price {
    text-align: center;
    margin-top: 25px;
    color: #fff;
    font-size: 18px;
    font-family: 'Lora', sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="grid"&gt;
      &lt;div class="cell packaging1-wrapper"&gt;
        &lt;img src="./img/coffee-cookieDough.png" class="responsive-image coffee-cookieDough"&gt;
  
        &lt;h5 class="coffee-name"&gt;Cookie Dough&lt;/h5&gt;
        &lt;h6 class="coffee-price"&gt;£2.49&lt;/h6&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="cell packaging2-wrapper"&gt;
      &lt;img src="./img/coffee-almond.png" class="responsive-image coffee-almond"&gt;
  
      &lt;h5 class="coffee-name"&gt;Amaretto Almond&lt;/h5&gt;
      &lt;h6 class="coffee-price"&gt;£2.49&lt;/h6&gt;
    &lt;/div&gt;
  
    &lt;div class="cell packaging2-wrapper"&gt;
      &lt;img src="./img/coffee-vanilla.png" class="responsive-image coffee-vanilla"&gt;
  
      &lt;h5 class="coffee-name"&gt;Very Vanilla&lt;/h5&gt;
      &lt;h6 class="coffee-price"&gt;£2.49&lt;/h6&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>