title: Center align container and left align child elements
body: <p>I've got X number of images (all the same height and width), and I want to display them on a web page. But I want to make the page automatically display the maximum number of images on a row (without resizing the images) when the browser is resized, and to show the images a fixed distance apart.</p>
  
  <p>Also the images should be grouped together in the centre of the page, and displayed one after the other.</p>
  
  <p>e.g.
  When the browser window is only wide enough to display 3 images on a row, they should be displayed as follows. </p>
  
  <p>3 images per row grouped together a fixed distance apart, in the centre of the page, one after the other.
  <a href="https://i.stack.imgur.com/zzKav.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zzKav.png" alt="enter image description here"></a></p>
  
  <p>And if the browser is made wider so 4 images can be displayed on a row they should be displayed like so. </p>
  
  <p>4 images per row (without resizing the images), grouped together a fixed distance apart, in the centre of the page, one after the other.
  <a href="https://i.stack.imgur.com/6Lr2I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Lr2I.png" alt="enter image description here"></a></p>
  
  <p>So far I've written the following code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="outer-div"&gt;
      &lt;div class="inner-div"&gt;
          &lt;div class="image-div"&gt;&lt;img src="images/1.png"&gt;&lt;/div&gt;
          &lt;div class="image-div"&gt;&lt;img src="images/2.png"&gt;&lt;/div&gt;
          &lt;div class="image-div"&gt;&lt;img src="images/3.png"&gt;&lt;/div&gt;
          &lt;div class="image-div"&gt;&lt;img src="images/4.png"&gt;&lt;/div&gt;
          &lt;div class="image-div"&gt;&lt;img src="images/5.png"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>img {
      height: 200px;
      width: 200px;
      padding: 10px;
  }
  
  .image-div {
      display: inline;
  }
  
  .outer-div {
      text-align: center;
      width: 100%;
  }
  
  .inner-div {
      text-align: left;
      display: inline;
  }
  </code></pre>
  
  <p>So the images are displayed inline with a 10px padding inside a div (inner-div) which is then centred inside the outer-div. And the images are text-aligned to the left inside the inner-div.</p>
  
  <p>But the problem is they are displayed as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/c4Van.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c4Van.png" alt="enter image description here"></a>  </p>
  
  <p>And like follows when the browser is made wider
  <a href="https://i.stack.imgur.com/8DQTv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8DQTv.png" alt="enter image description here"></a></p>
  
  <p>Can someone please show me how to display the images like the first set of images? </p>
  
  <p>i.e. Maximum number of images per row (without resizing the images), one after another, grouped together in the centre of the page, fixed distance apart (wrapped).</p>