ボタンの位置が反映されない

サイト作成の練習で、ボタンの位置調整を行なっていたのですが、CSSのposition反映が適用されず、buttonが右に移動できません。
キャッシュの削除も行いましたが駄目でした。
ご教授のほど宜しくお願いいたします。

⬇︎イメージ図

html
1{% extends 'base.html' %}
2{% load static %} 
3
4{% block header %}
5<link rel='stylesheet' type="text/css" href="{% static 'style.css' %}">
6{% endblock header %}
7
8{% block content %}
9
10<div class='container'>
11  {% for item in object_list %}
12  <div class="card">
13      <div class="title">
14        <h5 class="card-header">{{ item.title }}</h5>
15      </div>
16      <div class ="body">
17        <h5 class="card-title">投稿者：{{ item.author }}</h5>
18        <h5 class="card-title">レビューが参考になった人：{{ item.useful_review }}人</h5>
19      </div>
20      <div class ="button">
21        <a href="{% url 'detail' item.pk %}" class="btn-primary">詳しく見る</a>
22      </div>
23    </div>
24  {% endfor %}
25  </div>
26{% endblock content %}

html
1#base.html
2
3<!doctype html>
4<html lang="en">
5  <head>
6    <!-- Required meta tags -->
7    <meta charset="utf-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9
10    <!-- Bootstrap CSS -->
11    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
12    
13{% block header %}
14{% endblock header %}
15
16</head>
17  <body>
18
19    {% block content %}
20    {% endblock content %}
21
22    <!-- Optional JavaScript -->
23    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
24    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
25    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
26    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
27  </body>
28</html>

css
1 #style.css
2
3.card{
4    margin-bottom : 30px;
5}
6
7.card .button .btn-primary{
8    porition: absolute;
9    top: 40px;
10    right: 25px;
11    bottom: 0;
12}