title: row is missing images
body: <p>first row have images. the second row have long space and one image at the end. the third row have images. image are in different size.</p>
  
  <p>i tried width under 10%. i move images around. height work, but when readjusting the browser the image will not move.</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>.row&gt;.column {
    padding: 5%;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .col {
    border: 1px solid black;
    margin-left: 25px;
    margin-right: auto;
    max-width: 5%;
    float: left;
    min-height: 10%;
    padding: 0;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col"&gt;
      &lt;img src="image/image0.jpg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;img src="image/image1.jpg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;img src="image/image2.jpg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;img src="image/image3.jpg" onclick="openLightbox();toSlide(4)" class="hover-shadow preview"&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;img src="image/image4.jpg" onclick="openLightbox();toSlide(5)" class="hover-shadow preview"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>first row have images. the second row have long space and one image at the end. the third row have images. image are in different size.</p>