Masonryを使って画像を一覧表示すると左右にスペースができてしまう

Masonryを使用し画像を一覧表示しています。ヘッダーのサイズに合わせて画像を一覧表示させたいのですが、画像のように両サイドが余ってしまいます。
どのようにすればヘッダーにぴったり合わせることができるでしょうか

cssだけであればぴったり表示されるのですが、masonry.jsを入れるとスペースができます。
読み込みの瞬間は正しく表示されます。(0.1秒くらいですが。。)

css

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

.pinGridWrapper h1 {
    font-size: 2.0em;
    padding: 10px 0 10px 0;
    text-align: center;
    max-width: 160em; 
    margin: 0 auto;
}
.pinGrid {
    width: 103.125%; 
    overflow: hidden;
    margin-left: -1.562%; 
    margin-bottom: -1.875em; 
}
.pin {
    display: inline-block;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 6px -6px #ccc;
    -moz-box-shadow: 0 6px 6px -6px #ccc;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;

    max-width: 100%;
    box-shadow: 0.5px 0.5px 0.5px 0 #8b8b8b;


    width: 30.303%; 
    float: left;
    margin: 0 1.515% 1.875em;
}
.pin img {
    width: 100%;
    height: auto;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 4px 4px 0 0;
}


@media only screen and ( max-width: 160em ) 
{
    .pin
    {
        width: 23.088%; 
        margin-bottom: 0.938em;
        margin-right: 0;
    }
}
@media only screen and ( max-width: 70em ) 
{
    .pin
    {
        width: 31.280%; 
        margin-bottom: 0.938em;
        margin-right: 0;
    }
}
@media only screen and ( max-width: 40em ) 
{
    .pin
    {
        width: 47.786%; 
        margin-bottom: 0.938em; 
    }
}
@media only screen and ( max-width: 15em ) 
{
    .pin
    {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

javascript

//masonry.js
$(document).on('ready page:change ', function() {
    var $container = $('.pinGridWrapper');

    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.pin',
            isFitWidth: true,
            reload: true,
            isAnimated: true,

            animationOptions: {
                duration: 200,
                easing: 'swing'
            }
        });

    });
    $(function($) {
        $('pin').hide();
        $('pin').each(function(i) {
            $(this).delay(i * 2).fadeIn(80);//デフォルト1000
        });
    });
});

items/_index.html.erb

<div class="pinGridWrapper">
  <div class="pinGrid">
    <% @items.each do |item| %><!-- アイテムインデックス start-->
        <div class="pin">
          <% if item.picture_1.present? %>
              <%= link_to(item) { image_tag item.picture_1_url(:thumb2),:class =>"index_border_radius" } %>

              <% unless item.infraction %>
                  <h2 class="palette-paragraph">
                    <%= item.title %>
                  </h2>
              <% else %>
                  <h4 class="palette-paragraph">
                    違反アイテム
                  </h4>
              <% end %>


              <p>
                <i class="fa fa-clock-o"></i>
                <span class="countdown" data-until= "<%= item.limit_day.to_datetime %>" ></span>
              </p>
          <% else %>
              <%= link_to(item) {image_tag("opps.jpg", :size => '135x135') } %>
          <% end %>
        </div>
        <% end %><!-- アイテムインデックス end -->
  </div>
</div>

items/index.html.erb

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <% if @recent_press.present? %>
        <em>News </em>
        <small>

          <%= link_to @recent_press.title, press_url(@recent_press) %>
        </small>
    <% end%>
    <h4 class="page-header">新着アイテム
      <span class="btn-toolbar pull-right">
         <span class="btn-group btn-group-xs">
              <button class="btn  btn-inverse dropdown-toggle" type="button" data-toggle="dropdown">
                カテゴリ <span class="caret"></span>
              </button>
              <ul class="dropdown-menu dropdown-menu-default" role="menu">
                <% Category.where(parent_id: 1).sort{|a, b| a.code <=> b.code}.each do |cat| %>

                    <li> <%= link_to cat.name, category_index_path(cat.id) %></li>
                    <li class="divider"></li>
                <% end %>
              </ul>
         </span>
      </span>
    </h4>

    <!-- アイテムインデックス -->
    <%= render 'items/index' %>
  </div>
</div>