Need Help: Not able to add gutter between the cards.

[Bikashd4332]

I've specified, gutter in MaonsryOption.

// Masonry Options
const masonryOptions: MasonryOptions = {
	fitWidth: true,
	columnWidth: 365,
	gutter: '50',
	itemSelector: '.user-post',
	resize: true,
};

and used that like this.

  <Box
	  as={Masonry}
	  elementType="ul"
	  width="100%"
	  options={masonryOptions}
	  disableImagesLoaded={false}
	  updateOnEachImageLoad={false}
  >
	  {listOfCards.map((card) => (
		  <WallOfFameCard key={card.id} {...card} {...{ showOnlyWallOfFame }} />
	  ))}
  </Box>

These are my children components that I render

<Box as="li" className="user-post" css="list-style-type: none; text-indent: 0">
	<Box borderRadius="8px" overflow="clip" border="solid 1px" borderColor="black-10">
	.......

Yet I don't see any gutter between them.