Masonry with Ruby-Formatting Issue

Question

I am new to Ruby on Rails and I am working through my first web application. I am trying to insatll masonry-rails to handle my formatting but I can't seem to get it to display correctly. Its supposed to display in a horizontal row, but there is a gap I can't seem to close. You can see my problem here: https://pintrested-blakeluna.c9.io/pins

The following is the code I'm using.

PINS.JS.COFFEE

$ ->
 $('#pins').imagesLoaded ->
 $('#pins').masonry
   itemSelector:'.box'
 isFitWidth: true

PINS.CSS.CSS

#pins {
margin: 0 auto;
}

.box {
margin: 5px;
width: 214px;
}

.box img {
width: 100%;
}

View/PINS/INDEX.HTML.ERB

<div id="pins" class="transitions-enabled">
 <% @pins.each do |pin| %>
 <div class="box panel panel-default">
  <%= link_to image_tag(pin.image.url(:medium)), pin %>
   <div class="panel body"> 
    <%= pin.description %>
   </div>

<div class="panel-footer">    
   <% if pin.user == current_user %>
    <%= link_to 'Edit', edit_pin_path(pin) %>
    <%= link_to 'Destroy', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
   <% end %>
</div>
<% end %>

</div>

</div>
 <%= link_to 'New Pin', new_pin_path %>

APPLICATION.JS

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require masonry/jquery.masonry
//= require_tree .

I've been stuck for quite some time, I feel like I have to be missing something simple, the code reflects exactly what I should be doing and it isn't working. Thanks!