如何使用砌体图库集中容器

Question

我试图将我的砌体布局的项目居中，但它仍然总是向左浮动并且在某些浏览器宽度处有很多空白区域。另外，如何在hr元素之间的容器底部获得更多填充？这是网站页面链接：http://www.gabrielleelizabethstudios.com/gallery_template.html

HTML：

<div class="masonry js-masonry"
  data-masonry-options='{ "itemSelector": ".item", isFitWidth: true}'>
  <div class="item">
        <a class="group1" href="GEA_Galleries/GEA_Photography_Galleries/GEA_Justin_Gallery_Photos/CCS%20-%20Justin%20Cox%202014%20(1).jpg" title="justin merriman 2014"><img width="167" height="250" src="GEA_Galleries/GEA_Photography_Galleries/GEA_Justin_Gallery_Photos/CCS%20-%20Justin%20Cox%202014%20(1).jpg"/></a>
    </div>
    <div class="item w2">
        <a class="group1"...

CSS：

.item img{
    border-radius: 10px;

}
.masonry{
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 35px;
}

.masonry .item{
    margin-bottom: 20px;
    margin-top: 20px;
    height: 250px;
    float: left;
    margin: 10px;
}

.item { width: 167px; }
.item.w2 { width: 375px; }

@media only screen and (max-width: 720px),
    only screen and (max-device-width: 720px){
        .masonry{width: 95%;}
    }