title: How to align Images properly in rows?
body: <p>I want six images to align properly, for example in two rows of three images, and be level. But they are not aligning, and some of them are not even the same size.</p>
  <p>My intial issue was when making the screen smaller the images would fall into each other. That is not an issue now, but the images are not the same size and they do not align properly.</p>
  <p>How do I align images properly in rows?</p>
  <p>Here is my working code:</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>#boxes .box img {
      width: 60%;
      height: 80%;
      display: block;
      justify-content: center;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="boxes"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="box"&gt;
                      &lt;h3&gt;Yosemite National Park&lt;/h3&gt;
                      &lt;img src="https://images.unsplash.com/photo-1629233796529-4a04bf1aee52?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1287&amp;q=80" alt="Yosemite"&gt;
                  &lt;/div&gt;
                  &lt;div class="box"&gt;
                      &lt;h3&gt;Redwood National Park&lt;/h3&gt;
                      &lt;img src="https://images.unsplash.com/photo-1582790670329-b14bf5c38562?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=735&amp;q=80" alt="Redwood"&gt;
                  &lt;/div&gt;
                  &lt;div class="box"&gt;
                      &lt;h3&gt;Joshua Tree National Park&lt;/h3&gt;
                      &lt;img src="https://images.unsplash.com/photo-1626008007279-f41981695728?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1374&amp;q=80" alt="Joshua Tree"&gt;
                  &lt;/div&gt;
                  &lt;div class="box"&gt;
                      &lt;h3&gt;Channel Islands National Park&lt;/h3&gt;
                      &lt;img src="https://images.unsplash.com/photo-1629256299843-5fb1714fe067?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1287&amp;q=80" alt="Channel Islands"&gt;
                  &lt;/div&gt;
                  &lt;div class="box"&gt;
                      &lt;h3&gt;Seqouia National Park&lt;/h3&gt;
                      &lt;img src="https://images.unsplash.com/photo-1535628169704-5d0b32718ee8?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=687&amp;q=80" alt="Seqouia"&gt;
                  &lt;/div&gt;
                  &lt;div class="box"&gt;
                      &lt;h3&gt;Pinnacles National Park&lt;/h3&gt;
                      &lt;img src="https://images.unsplash.com/photo-1624244453711-e042e81529d9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=687&amp;q=80" alt="Pinnacles"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt; </code></pre>
  </div>
  </div>
  </p>