Random Gap in Row of 3 Columns - ruby-on-rails

Question

Here is what I mean, as you can see there is a gap in the second row and the missing panel is shuffled down to a fourth row that shouldn't exist. It makes no sense. I'm using Bootstrap 3 if that helps at all. Let me know if you guys need anything else.
Here is my html: app\views\blog_posts\index.html.erb and scss: app\assets\stylesheets\blog_posts.scss
.banner {
font-family: 'Pacifico', cursive;
color: white;
text-shadow: 1px 1px 8px $myw-pink;
font-size: 80px;
text-align: center;
margin: 50px 0 40px 0;
}
.panel, .panel-default {
.panel-blog-post {
.panel-heading {
padding: 0px;
p {
font-family: 'Pacifico', cursive;
font-size: 30px;
text-shadow: 2px 2px 2px black;
text-align: center;
padding: 15px;
position: absolute;
}
img {
width: 100%;
border-radius: 2px 2px 0 0;
// .blog-pic-style {
// &:hover {
// filter: brightness(200%);
// transition: ease 1s;
// }
// }
}
}
}
.panel-body {
img {
border-radius: 100%;
}
}
}
.navbar {
margin-bottom: 40px;
background-color: $myw-pink;
border: none;
.navbar-header {
margin: 0 50px 0 50px;
button {
border-width: 2px;
border-color: white;
&:hover {
background-color: $myw-blue;
transition: ease .25s;
}
&:focus {
background-color: $myw-blue;
}
.icon-bar {
background-color: white;
}
}
.navbar-brand {
color: white;
font-family: 'Patua One', cursive;
&:hover {
color: $myw-blue;
transition: ease .25s;
}
}
}
.collapse, .navbar-collapse {
.nav, .navbar-nav, .navbar-right {
margin: 0 50px 0 50px;
li {
a {
color: white;
font-family: 'Patua One', cursive;
&:hover {
color: $myw-blue;
transition: ease .25s;
}
}
}
}
}
}
.panel-default {
border: none;
font-family: 'Patua One', cursive;
.panel-footer {
background-color: $myw-blue;
}
.panel-heading {
background-color: $myw-blue;
color: white;
a {
color: white;
text-decoration: none;
&:hover {
color: $myw-pink;
transition: ease .25s;
text-shadow: 2px 2px 2px white;
}
}
}
}
.container {
margin: 60px auto 20px auto;
}
.contact {
margin: 20px 0 20px 0;
text-align: center;
.custom-button {
height: 34px;
margin: 0 auto 20px auto;
width: 110px;
border: solid white 3px;
font-family: 'Patua One', cursive;
font-size: 20px;
a {
text-decoration: none;
color: white;
}
&:hover {
background-color: $myw-pink;
transition: ease .25s;
}
}
.social-buttons {
.facebook {
#include social-button($facebook);
}
.twitter {
#include social-button($twitter);
}
.linkedin {
#include social-button($linkedin);
}
}
}
<div class="row">
<% #blog_posts.each do |blog_post| %>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-blog-post">
<div class="panel-heading">
<p><%= link_to blog_post.title, blog_post %></p>
<!-- <div class="blog-pic-style"> -->
<%= link_to (image_tag blog_post.blog_pic.url), blog_post %>
<!-- </div> -->
</div>
</div>
<div class="panel-body">
by <%= blog_post.user.username %>
<% if blog_post.user.avatar.nil? %>
<%= image_tag blog_post.user.avatar.url, size: 40 %>
<% else %>
<%= image_tag 'user.svg', size: 40 %>
<% end %><br />
<p><i>Created: <%= blog_post.created_at.strftime('%m/%d/%Y at %I:%M%p') %></i></p>
<p><%= blog_post.blog[0..150] %>..<%= link_to "Read More", blog_post %></p>
</div>
<% if signed_in? && (current_user.role == "admin" || current_user.role == "manager") %>
<div class="panel-footer">
<%= link_to 'Edit', edit_blog_post_path(blog_post), class: "btn btn-warning" %>
<%= link_to 'Destroy', blog_post, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
Thanks in advance for the help!