<div class="content-wrapper">
     <div class="image-container">
       <div class="image-collections">
         <figure>
       <img src="http://www.pmob.co.uk/mobile/images/a1.jpg" alt="A Beautiful Car">
           <figcaption>A beautifulmodel</figcaption>
         </figure>
       </div>

       <div class="image-collections">
         <figure>
           <img src="https://us.123rf.com/450wm/subbotina/subbotina1510/subbotina151000001/46048732-beautiful-spa-model-girl-with-perfect-fresh-clean-skin.jpg?ver=6" alt="a beautiful model">
           <figcaption>A beautiful face model</figcaption>
         </figure>
       </div>

       <div class="image-collections">
         <figure>
           <img src="https://us.123rf.com/450wm/subbotina/subbotina1510/subbotina151000001/46048732-beautiful-spa-model-girl-with-perfect-fresh-clean-skin.jpg?ver=6" alt="a beautiful model">
           <figcaption>A beautiful face model</figcaption>
         </figure>
       </div>

       <div class="image-collections">
         <figure>
           <img src="https://us.123rf.com/450wm/subbotina/subbotina1510/subbotina151000001/46048732-beautiful-spa-model-girl-with-perfect-fresh-clean-skin.jpg?ver=6" alt="a beautiful model">
           <figcaption>A beautiful face model</figcaption>
         </figure>
       </div>

       <div class="image-collections">
         <figure>
           <img src="https://us.123rf.com/450wm/subbotina/subbotina1510/subbotina151000001/46048732-beautiful-spa-model-girl-with-perfect-fresh-clean-skin.jpg?ver=6" alt="a beautiful model">
           <figcaption>A beautiful face model</figcaption>
         </figure>
       </div>

       <div class="image-collections">
         <figure>
           <img src="https://us.123rf.com/450wm/subbotina/subbotina1510/subbotina151000001/46048732-beautiful-spa-model-girl-with-perfect-fresh-clean-skin.jpg?ver=6" alt="a beautiful model">
           <figcaption>A beautiful face model</figcaption>
         </figure>
       </div>
     </div>
   </div>
html{
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

html{
    font-size: 62.5%;
}

body {
    margin: 0;
}

.content-wrapper{
    width: 100%;
    height: auto;
    background: #23424a;
}

.image-container{
    width: 80%;
    background: aquamarine;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
}

.image-collections img{
  width: 100%;
  height: auto;
}

.image-container figcaption{
    font-size: 2rem;
  margin: 0;
}




















Run Pen

External CSS

  1. https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.