How to centre the images?

I know this is lame should be a simple CSS but can't seem to get it working. Screenshot 2020-04-17 at 16 32 35 Where the blue background is it's just empty space i want the images to be centered

<div className="grid">
  <Masonry
    className="portfolio-main"
    elementType="div"
    options={masonryOptions}
    disableImagesLoaded={false}
    updateOnEachImageLoad={false}
  >
    {state.map((el) => {
      // console.log(el)
      return (
        // <a href={`img/${page}/${el}`}>
        <img src={`img/${page}/${el}`} className="grid-item" alt="" width="200px" />
        // </a>
      )
    })}
  </Masonry>
</div>

css - what i have tried

.portfolio-main {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  background-color: rgba(0, 0, 255, 0.123);
}

eiriklv / react-masonry-component

How to centre the images? #151