文章の位置調整がうまくいかない

問題点：

表示内容画面の文章をtitleの親要素を基準に調整を行いたいのですが、うまくいきません。

試したこと:

親要素のpositionをrelativeに指定することで、子要素は親要素を基準に位置設定が行われるので、その方法で試したのですがうまくいきませんでした。
(親要素 .card-bodyをposition: relative;指定を行い子要素.card-body.cardcommentをtop:30pxで余白を作ったが反映がされない。）
キャッシュの削除は行なっています。

ご教授の程宜しくお願いします。

イメージ図

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{{ errormessage }}
11
12<div class='container'>
13 <div class="card">
14   <div class ="title">
15    <h5 class="card-header">{{ object.title }}</h5>
16   <div class="card-body">
17     <img src='{{object.images.url}}' class = "sample" width=250 top=100>
18      <h5 class="card-comment">投稿者：{{ object.author }}</h5>       
19      <h5 class="card-comment">レビュー内容：{{ object.content }}</h5>
20      <h5 class="card-comment">投稿者の評価：{{ object.evaluation }}</h5>        
21      <h5 class="card-comment">レビューが参考になった人：{{ object.useful_review }}人</h5>
22   </div>
23  </div>
24   <div class ="return">
25       <a href="{% url 'list' %}" class="r">戻る</a>
26   </div>
27 
28 </div>
29
30 </div>
31{% 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.card{
2    position: relative;
3    margin-bottom: 30px;
4}
5
6.button{
7    position: relative;
8    height: 30px;
9}
10
11.card-header{
12    position: relative;
13}
14
15.card-body .sample{
16    float: right;
17}
18
19.card-header .card-comment{
20    position: absolute;
21    top: 30px;
22}