Masonry - Only having desired effect after browser resize

Question

I'm a relative newb to development, and I have searched for the answer to this but can't find a solution that matches my problem.

I've used a (very simple) bit of masonry to give the 'auto sizing' effect in my project, but it strangely only seems to be triggered when i resize the browser. The on the page will initially start with a couple piled on top of eachother, but once the browser resizes they correct themselves to how I want. The divs each contain images which i want to fit to 100% width of the div.

I'm working with Rails 4.2 project. Here is my Jquery/masonry:

$('.home-container').masonry({
itemSelector: '.article-show',
columnWidth: 100,
gutter: 10

});

Here is the HTML for the article-show:

<div class="home-container">
  <% @articles.each do |article| %>
    <div class="article-show">
      <div class="image">
        <%= image_tag(article.image_one) %>
      </div>
      <div class="text">
       <%= article.artist %>
      </div>
    </div>
  <% end %>
</div>

This is the css for the 'article-show' div which appears 10 times:

.home-container {
width: 95%;
margin: 0 auto;
text-align: center;
margin-left: 5.4%;
}

.article-show {
width: 20%;
display: inline-block;
margin-bottom: 10px;
}

.image {
width: 100%;
}

.article-show img {
width: 100%;
position: relative;
-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

There seem to be a lot of masonry resizing issues posted but they only seem to address the the resizing messing up when the browser is resized - whereas mine starts incorrectly.

I'm sure it must be something to do with my css but I've stripped the css back pretty much line by line and i can't seem to find the issue.

If anyone can point me in the right direciton it would be hugely appreciated.