title: How to put images next to eachother
body: <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>.boxGallery {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  
  .gallery {
    min-width: 320px;
    width: 50%;
    margin: 12px;
    float: left;
  }
  
  .gallery img {
    width: 100%;
    height: auto;
    padding: 5px;
    border-radius: 12px;
  }
  
  .desc {
    padding: 15px;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="boxGallery"&gt;
    &lt;div class="gallery"&gt;
      &lt;img src="https://placeimg.com/640/480/any"&gt;
    &lt;/div&gt;
  
    &lt;div class="gallery"&gt;
      &lt;img src="https://placeimg.com/640/480/any"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="desc"&gt;
    &lt;p&gt;Auvergne, Frankrijk 2018&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="boxGallery"&gt;
    &lt;div class="gallery"&gt;
      &lt;img src="https://placeimg.com/640/480/any"&gt;
    &lt;/div&gt;
  
    &lt;div class="gallery"&gt;
      &lt;img src="https://placeimg.com/640/480/any"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to make a photo gallery. The thing is that I can't get the images to be next to eachother. So what I want is: I want a title above each section of photos, that section has to be centered and multiple images should be able to shit next to eachother accordingly to the size of the page. That last thing is what I can't get to work (screenshot). I don't really know how I can fix this. Anyone any ideas?</p>
  
  <p><a href="https://i.stack.imgur.com/2xwGT.png" rel="nofollow noreferrer">SCREENSHOT</a></p>