Make logos look even distance from each other-CodePudding

I am trying to get my logos to look even distance from each other but cannot figure out why it won't work. I've tried a few things but there is still something off about it. Can't tell if I need to change individual logo measurements or I can change something here. (I didn't write original code which is why I am having trouble.)

Here is a picture of what I am talking about


import Marquee from 'react-fast-marquee'
import Icon from './icons'

const PartnerRunningLine = () => (
  <div className="absolute bottom-0 left-[-2px] right-[-2px] transform translate-y-[48px] overflow-x-clip overflow-y-visible">
    <div className="text-white bg-background-partners transform rotate-[-2deg] scale-[1.001]">
      <Marquee pauseOnHover gradient={false} speed={40}>
        <div className="grid grid-cols-5 gap-20 pr-16 py-[25px]">
          <Icon iconName="oasisSB" />
          <Icon iconName="coinsquare" />
          <Icon iconName="tetra" />
          <Icon iconName="researchCapital" />
          <Icon iconName="pfaff" />
        </div>
      </Marquee>
    </div>
  </div>
)

export default PartnerRunningLine

CodePudding user response：

Try to use flex instead of grid

flex flex-row justify-between

Icons will stay in one line and have a same space between