Почему логотипы не соответствуют друг другу?

Итак, у меня есть список клиентских логотипов, и я использовал один из компонентов Tailwinds, чтобы разместить их на своем веб-сайте. Он должен был сделать все встроенным, но по какой-то причине логотипы этого не сделали. Несмотря на то, что все они имеют одинаковые размеры, некоторые логотипы кажутся больше, чем другие, и когда я проверяю элемент проверки, он показывает логотипы в виде блоков (все в html - это коробки, лол), и поля расположены на одной линии друг с другом, но не сами логотипы. Выглядит криво, как говорят люди.

Я попробовал изменить размеры и посмотреть, поможет ли это в моем случае, но на самом деле это ничего не дало, поэтому я пришел сюда.

Вот код клиентского компонента, если кому-то интересно:

import React from 'react'
import accentureLogo from '../assets/images/accenture.svg'
import open from '../assets/clients/open.svg'
import equi from '../assets/clients/equi.svg'
import mol from '../assets/clients/mol.svg'
import cox from '../assets/clients/cox.svg'

function Clients() {
  return (
    <div className='flex justify-center items-center text-center'>
      <section className = "mt-28 flex justify-center items-center text-center">
        <div className = "py-8 lg:py-16 mx-auto max-w-screen-xl px-4">
          <div className = "flex flex-wrap justify-center items-center space-x-8 space-y-4 md:space-y-0 text-gray-500 dark:text-gray-400">
            <a href = "#" className = "flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src = {mol} alt = "MOL" />
            </a>
            <a href = "#" className = "flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src = {open} alt = "Open" />
            </a>
            <a href = "#" className = "flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src = {accentureLogo} alt = "Accenture" />
            </a>
            <a href = "#" className = "flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src = {cox} alt = "Cox" />
            </a>
            <a href = "#" className = "flex justify-center items-center">
              <img className='h-9 object-contain hover:text-gray-900 dark:hover:text-white' src = {equi} alt = "Equi" />
            </a>
          </div>
        </div>
      </section>
    </div>
  )
}

export default Clients

А вот скриншот того, как это выглядит на моем КОНЦЕ https://imgur.com/a/gPcNSME

Кто-нибудь знает ответ, почему он это делает?