title: CSS-Not able to place a list of Images side by side
body: <p>I have a list of CSS Images which needs to be aligned side by side. By that I mean two adjacent Images should share a common border. So, in case there are 20 Images, I would like to stack them in rows of 4 each which can change depending on the screen size. Currently, there is white space between Images which I clearly don't want. I have attached a JS-Fiddle to show what I am doing. </p>
  
  <p>Kindly help</p>
  
  <p>CSS</p>
  
  <pre><code> .photo-grid {
  
      margin: 1em auto;
  
      max-width: 300%;
  
      text-align: center;
  
  }
  
  
  
  .photo-grid li {
  
  
  
      display: inline-block;
  
      margin: 1em;
  
      width: 125px;
  
  }
  
  
  
  .photo-grid img {
  
      display: block;
  
      height: auto;
  
      max-width: 100%;
  
  }
  
  
  
  .photo-grid figure {
  
      height: 125px;
  
      overflow: hidden;
  
      position: relative;
  
      width: 125px;
  
  }
  
  
  
  .photo-grid figcaption {
  
      background: rgba(0,0,0,0.8);
  
      color: white;
  
      display: table;
  
      height: 100%;
  
      left: 0;
  
      opacity: 0;
  
      position: absolute;
  
      right: 0;
  
      top: 0;
  
      z-index: 100;
  
  }
  
  
  
  .photo-grid figcaption p {
  
      display: table-cell;
  
      font-size: 1.5em;
  
      position: relative;
  
      top: -40px;
  
      width: 289px;
  
      vertical-align: middle;
  
  }
  
  
  .photo-grid li:hover figcaption {
  
      opacity: 1;
  
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/rajivsr2309/b627h6ce/4/" rel="nofollow noreferrer">JS Fiddle</a></p>