Как сделать jQuery Masonry по центру

Question

Я пытаюсь центрировать кладку jQuery ( https://masonry.desandro.com/), но не могу этого сделать. Я посмотрел несколько ответов на Stackru, но все они сказали, чтобы добавить margin: 0 auto; к .grid div в CSS, что я и сделал, но безрезультатно.

Это большая часть моего кода:

$(".grid").masonry({
  itemSelector: '.grid-item',
  columnWidth: 300,
  fitWidth: true,
});

.grid {
  margin: 0 auto;
}

.grid-item {
  background-color: rgb(200, 200, 200);
  border-radius: 5px;
  padding: 5px;
  height: 300px;
  width: 400px;
  margin-bottom: 30px;
}

;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-item">iphone 8</div>
  <div class="grid-item">sumthing else</div>
  <div class="grid-item">iphone six hundred and forty two</div>
  <div class="grid-item">iphone six hundred and forty two</div>
</div>

Вот мой веб-сайт, где этот код жив: https://www.theedibleapple.com/reviews/

Я должен делать что-то ужасно неправильно.