ブートストラップ　カードがうまく配列できない

ブートストラップのカードで横３枚で２段目も投稿を追加していくのですが、２段目も３枚になるまでカードの大きさが変わりレイアウトが崩れてしまいます。

どうにか解決したいのですが、全くダメでした。

html
1<div class="row row-cols md-3">
2  <% @posts.each do |post| %>
3    <div class="col md-3">
4      <div class="card">
5          <%= attachment_image_tag post, :post_image, class: "card-img-top"%>
6          <div class="card-body">
7          <h3 class="card-title%=post.title%></h3>
8          <h5 class="card-subtitle text-primary"><%=post.subject%></h5>
9          <h4 class="card-subtitle text-muted"><%=post.teacher_name%></h4>
10          <p class="card-text"><%=post.content%></p>
11          <div class="text-center">
12             <% if current_user == post.user %>
13                  <%= link_to "削除", post, method: :delete, data: { confirm: "You sure?" }, class: 'btn btn-danger btn-sm' %>
14                  <%= link_to "編集", edit_post_path(post), class: "btn btn-success btn-sm"%>
15             <%end%>
16          </div>
17        </div>
18      </div>
19    </div>  
20  <% end %>
21</div>
22<%=paginate @posts %>

css
1.pagination {
2  justify-content: center;
3}
4
5/* posts/index*/
6.row row-cols-md-3 {
7    text-overflow: ellipsis;
8    margin: 0px 0px 0px 0px;
9}
10 
11.card-text {
12    width: 220px;
13    display: -webkit-box;
14    -webkit-box-orient: vertical;
15    -webkit-line-clamp: 2;
16    overflow: hidden;
17}
18
19.card-img-top {
20    width: 348px;
21    height: 245px;
22}