title: How Do You Center a Div While Maintaining the Bootstrap Size Distribution?
body: <p>P.S I'm self taught so I'm sorry about the lack of proper terms and info.</p>
  <p>I'm using bootstrap containers and stuff and I know that they adjust the dimensions of whatever is in them based on how many columns there are (I'm using col-md-4 for the columns and it fits 3 photos per column)</p>
  <p>I used that on 6 images and I have a 7th one to use. I centered it using flex but while it centers, the dimensions are not the same since it's the only image in that row and not automatically readjusted to be the same as the others. And when I remove the centering it looks perfect dimensions wise since its under the same group of photos but its aligned on the left of the screen since it's the first photo in the new row which makes sense.</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-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
  &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
            &lt;img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid"&gt;
          &lt;/div&gt;
          
          &lt;div class="d-md-flex justify-content-center"&gt;
          &lt;div class="col-md-4"&gt;
            &lt;img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is an example of what I'm trying to create and you can see how when i justify center it, it looks bigger than the rest and doesn't follow the same dimensions as the previous one had them distributed among the three of the photos</p>
  <p>It's my first time posting here so please let me know if i need to add something to the code next time to make it easier to read</p>