I want to adjust the text on the display content screen based on the parent element of title, but it doesn't work.

What I tried:

By specifying the position of the parent element as relative, the position of the child element is set based on the parent element, so I tried that method, but it didn't work.
(The parent element .card-body is specified as position: relative;and the child element .card-body.cardcomment is set to a margin at top: 30px, but it is not reflected.)
The cache is being deleted.

Thanks for your professor.

Image diagram
{% extends'base.html'%}
{% load static%}
{% block header%}
<link rel ='stylesheet' type = "text/css" href = "{% static'style.css'%}">
{% endblock header%}
{% block content%}

       Posted by: {{object.author}} 
       Review content: {{object.content}} 
       Posted by: {{object.evaluation}} 
       People whose reviews were helpful: {{object.useful_review}} people 
{% endblock content%}
# base.html
<! doctype html>
  <!-Required meta tags->
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
  <!-Bootstrap CSS->
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc + NcPb1"
{% block header%}
{% endblock header%}
    {% block content%}
    {% endblock content%}
  <!-Optional JavaScript->
  <!-JQuery first, then Popper.js, then Bootstrap JS->
  <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C + OGpamoFVy38MVBnE + IbbVYUew + OrCXaRkfj" cross origin = "anonymous"></script>
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-Q6E9RHvbIyZFJoft + 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" cross</script>
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity = "sha384-OgVRvuATP1z7JjHLkuOU7Xw704 + h835Lr + 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin = "an" script>
.card {
    position: relative;
    margin-bottom: 30px;
.button {
    position: relative;
    height: 30px;
.card-header {
    position: relative;
.card-body .sample {
    float: right;
.card-header .card-comment {
    position: absolute;
    top: 30px;