Bootstrapのcard col-3 marginでカードの余白を作りたい

Bootstrapのcolの余白を作成したいです。
イメージは下記画像を想定していますが、marginで隙間を加えようとすると４つ目が二段目に移動してしまいます。
![
どうすれば隙間を加えることができるでしょうか？

こちらの質問と同じ内容ではあるのですが、回答を見ても分からなかったので質問させていただきました、

html
1	<div class="row">
2		{% for item in item_list %}
3		<div class="card col-12 col-md-6 col-lg-3">
4			<div class="card-header">
5                <div class="card-title">
6                    <a class="" href="{% url 'app:detail' item.pk %}">{{ item.title }}</a>
7                </div>
8			</div>
9			<div class="card-body">
10				{% if item.image %}
11				<a class="img" href="{% url 'app:detail' item.pk %}">
12					<img src="{{ item.image.url }}" width="100%"/>
13				</a>
14				{% endif %}
15			</div>
16			<div class="card-content">
17                {% if item.post_user.icon %}
18                <a href="#" class="card-link" href="{% url 'app:user_detail' item.post_user %}">
19                <img src="{{ item.post_user.icon.url }}" width="20%">
20                {% endif %}
21                {{ item.post_user }}
22            </a>
23            </div>    
24                <div class="right floated">
25                        <input type="hidden" name="post_id" value={{item.id}}>
26                        <div class="like-count{{item.id}}">{{item.num_likes}}</div>
27                </div>
28		</div>
29			{% empty %}
30			<li class="list-group-item">
31				対象のデータがありません
32			</li>
33		{% endfor %}
34	</div>

css
1.card {
2  overflow: hidden;
3  position: relative;
4  padding: 0;
5  margin:  20px;
6}
7.card-body{
8  padding: 0;
9}
10.card-content{
11  padding: 10px;
12}
13
14コード