need to add 5 images in a row that is responsive and evenly spaced, which is the best way to do this.

I tried adding custom css but I couldn't get it to work correctly.

I added this css

.column-vehicle {
  float: left;
  width: 25%;
  padding: 5px;
}

.row-vehicle::after {
  content: "";
  clear: both;
  display: table;
} 

@media screen and (max-width: 500px) {
  .column-vehicle {
    width: 100%;
  }
}

Then in the custom 2 position with a custom module I did

<div class="row-vehicle">
  <div class="column-vehicle">
    <img src="https://www.access1alarm.com/images/vehicles/aston_martin.png" alt="aston_martin.png" style="width:100%">
  </div>
  <div class="column-vehicle">
    <img src="https://www.access1alarm.com/images/vehicles/audi.jpg" alt="audi.jpg" style="width:100%">
  </div>
  <div class="column-vehicle">
    <img src="https://www.access1alarm.com/images/vehicles/chevrolet.png" alt="chevrolet.png" style="width:100%">
  </div>
<div class="column-vehicle">
    <img src="https://www.access1alarm.com/images/vehicles/chrysler.jpg" alt="chrysler.jpg" style="width:100%">
  </div>
</div>

It doesn't work right at all. I get 3 images in a row that are larger and the fourth is below it.

Any advice or is there a different way to do this