title: Flex Contents wont Align in a Row Horizontally (Bootstrap 5)
body: <p>My Images seems to be not aligning in a Horizontal Row, I Tried every method but not working :(</p>
  <p>Output:
  <a href="https://i.stack.imgur.com/echGV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/echGV.png" alt="Output of the HTML and CSS" /></a></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>.img-size-square {
      width:  100%;
      height:  auto;
      max-width: 400px !important;
      max-height: 400px !important;
  }
  
  .container-for-hover {
    position: relative;
    width: 50%;
  }
  
  .image-for-hover {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay-for-hover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #6633ff;
  }
  
  .container-for-hover:hover .overlay-for-hover {
    opacity: 1;
  }
  
  .text-for-hover {
    color: white;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
    
    &lt;div class="row"&gt;
      &lt;div class="row"&gt;
        &lt;div class="d-flex col-12"&gt;
          &lt;div class="mx-auto"&gt;
            &lt;div class="container-for-hover img-size-square mb-2"&gt;
              &lt;img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp"&gt;
              &lt;div class="overlay-for-hover"&gt;
                &lt;div class="text-for-hover"&gt;Some Content Here 1, Row 1&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="container-for-hover img-size-square mb-2"&gt;
              &lt;img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp"&gt;
              &lt;div class="overlay-for-hover"&gt;
                &lt;div class="text-for-hover"&gt;Some Content Here 2, Row 1&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="container-for-hover img-size-square mb-2"&gt;
              &lt;img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp"&gt;
              &lt;div class="overlay-for-hover"&gt;
                &lt;div class="text-for-hover"&gt;Some Content Here 3, Row 1&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="d-flex col-12"&gt;
          &lt;div class="mx-auto"&gt;
            &lt;div class="container-for-hover img-size-square mb-2"&gt;
              &lt;img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp"&gt;
              &lt;div class="overlay-for-hover"&gt;
                &lt;div class="text-for-hover"&gt;Some Content Here 1, Row 2&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="container-for-hover img-size-square mb-2"&gt;
              &lt;img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp"&gt;
              &lt;div class="overlay-for-hover"&gt;
                &lt;div class="text-for-hover"&gt;Some Content Here 2, Row 2&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="container-for-hover img-size-square mb-2"&gt;
              &lt;img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp"&gt;
              &lt;div class="overlay-for-hover"&gt;
                &lt;div class="text-for-hover"&gt;Some Content Here 3, Row 2&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I Tried:
  I Tried everything on the Official Docs and on here -&gt; <a href="https://www.w3schools.com/bootstrap5/bootstrap_flex.php" rel="nofollow noreferrer">W3 BS5 Docs</a>, I Tried also <code>flex-row</code>, I'm also new to Web Developing Field.</p>
  <p>Goal:
  The <code>container-for-image</code> Div(s) should be Placed in a Horizontal Row in each <code>row</code> class div</p>