Masonry.js与Isotope.js画廊右侧间隙问题修复求助

我使用Masonry.js和Isotope.js搭建的画廊右侧存在一处小间隙，左右两侧间隙不对称，可查看预览图。尝试过多种修复方法均未成功，现将相关代码附上，请求帮助解决该问题。

JS代码 #

$(document).ready(function () {
    // Initialize Masonry
    $('.gallery').masonry({
        itemSelector: '.gallery-item',
        columnWidth: '.gallery-item',
        fitWidth: true
    });

    // Initialize Isotope (for filtering)
    var $grid = $('.gallery').isotope({
        itemSelector: '.gallery-item',
        layoutMode: 'masonry'
    });

    // Filter items when filter button is clicked
    $('.filter-btn').on('click', function () {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });
});

CSS代码 #

.gallery {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  padding: 5px;
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

内容的提问来源于stack exchange，提问作者Thinura Dinujaya