three col with equal height image and tagline not working-CodePudding

I have the following code with a screen attached.

As you can see there are 3-col with the image and title but they are not aligned either their padding is the same.

The overall section is on the left side and has a lot of space from the right.

Any idea how to make them equal in height and width?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="section-top-homepage">
  <!-- vission -->
  <div >
    <div >
      <img alt="" data-entity-type="file" data-entity-uuid="3afd4d82-63ca-4046-b77c-1d3815e959cf" src="/tilesw/sites/default/files/inline-images/vision.svg" />
      <h3 >Vision</h3>
    </div>
  </div>


  <!-- objectives -->

  <div >
    <div >

      <img alt="" data-entity-type="file" data-entity-uuid="6e0a289f-a866-4d46-81c8-6f2f6aceecd8" src="/tilesw/sites/default/files/inline-images/objectives.svg" />
      <h3 >Objectives</h3>

    </div>
  </div>
  <!-- mission -->

  <div >
    <div >

      <img alt="" data-entity-type="file" data-entity-uuid="aeaa7c28-c987-4174-a2c2-5fa45de0ab83" src="/tilesw/sites/default/files/inline-images/mission.svg" />
      <h3 >Mission</h3>

    </div>
  </div>
</div>

CodePudding user response：

Are you using bootstrap ?

When you set a class like col-4, you only set the width of each bloc, you need to set a max-heigth on css or in tag IMG using height.

Example:

CodePudding user response：

Set the width of the wrapping div with id id="section-top-homepage to 100% of the page. You can confirm this by setting its border to 1px solid red. This worked for me.