My Bootstrap image grid is not working as expected

Question

So I've been doing my portfolio and right now I'm doing the skills section which consists of a 6 image grid of each skill logo. For this I'm using Boostrap and I'm having a problem with the second row. It just clusters in the middle different from the first row. I'm linking my CodePen in case somebody can help me identify my problem.. (the idea of the CodePen is just watching the code as you guys can't see the images in there).

https://codepen.io/norwyx/pen/yLozjLg

Here's the HTML of the section that is not working:

<div class="row d-flex justify-content-center align-items-center" id="skills__first-row">
    <div class="col-md-4 skills__item">
      <img src="./images/html5-logo.png" alt="HTML5 logo" class="img-fluid" id="html__logo">
    </div>
    <div class="col-md-4 skills__item">
      <img src="./images/css3-logo.png" alt="CSS3 logo" class="img-fluid" id="css__logo">
    </div>
    <div class="col-md-4 skills__item">
      <img src="./images/js-logo.png" alt="JavaScript logo" class="img-fluid" id="js__logo"> 
  </div>
  <!-- Second Row -->
  <div class="row d-flex justify-content-center align-items-center" id="skills__first-row">
    <div class="col-md-4 skills__item">
      <img src="./images/html5-logo.png" alt="HTML5 logo" class="img-fluid" id="html__logo">
    </div>
    <div class="col-md-4 skills__item">
      <img src="./images/css3-logo.png" alt="CSS3 logo" class="img-fluid" id="css__logo">
    </div>
    <div class="col-md-4 skills__item">
      <img src="./images/js-logo.png" alt="JavaScript logo" class="img-fluid" id="js__logo"> 
  </div>

Answer 1

首先从row中移除d-flex类，bootstrap 4和5，row已经有弹性了，第二件事是，如果你想让你的图像在div text-center在每列上添加text-center类，您的问题将得到解决