バナーの位置を下に下げたい

###現状

画像のように、ページを開いたときにすでにバナーがメニュー下に重なり、見づらくなってしまっています。
いろいろ試してみたのですが、動きません。お力お貸しください！！
こちらとマルチポストしております。こちらで情報が更新・解決され次第、反映する予定です。どうぞよろしくお願いいたします。

###実現したいこと
分かりにくいかもしれませんが、メニューバー（白い部分）とバナー（山の写真の部分）が重なっています。別のページにも同様のメニューバーがあるのですが、完全に文字が見えない部分もあります。スクロールすると当然重なるので、メニューバーに問題はないと思います。そこでバナーの位置を下に下げたいです。

###確認したこと
・メニューバーCSSがposition:fixedかどうか
・メニューバー・バナーのpt,pb,mt,mbを調節（少し上下する程度で大きな反応はありませんでした。）

###コード

基本的にbootstrapで整えているため、ひとまずhtmlのみおいておきます。
wagtail(Django)で開発しているため、構造は若干複雑でブロックHTMLをページHTMLに挿入しています。

html
1{% load wagtailimages_tags wagtailcore_tags %}
2
3{% image self.banner_img fill-900x400 as img %}
4
5<div class="container-fluid bg-dark text-light p-5 " style="background-image: url('{{ img.url }}'); background-size: contain">
6    <div class="row">
7        <div class="col-12 text-center">
8            <div class="row  justify-content-center">
9                <div class="post-heading">
10                    <h2>{{ self.title }}</h2>
11                    <p class="subheading">{{ self.text|richtext }}</p>
12                </div>
13            </div>
14        </div>
15    </div>
16</div>

html
1{% extends "base.html" %}
2{% load wagtailcore_tags %}
3
4{% block content %}
5
6<main class="main">
7    <div class="contain">
8        {% for block in page.content %}
9            {% include_block block %}
10        {% endfor %}
11    </div>
12</main>
13
14{% endblock %}

<!DOCTYPE html>
<html class="no-js" lang="en"><head>
<meta charset="utf-8">
<title>About us</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"><link rel="stylesheet" type="text/css" href="/static/css/squjap.css">

</head>
<body class="">
    
<link rel="stylesheet" href="/static/css/menu_header_wagtail.css">

<div class="opacity" id="opacityDisplay"></div>
     <header id="headerUI" class="active">
          <div class="container">
               <div class="brand">
                    <img src="/media/images/logo8_16_111916.original.png" alt="logo8_16_111916.png" class="img-logo" height="50">
                         <div class="toggle" id="toggleAction"><i class="fas fa-bars"></i></div>
               </div>
                    <nav id="navMenu">
                         <ul>
                             <li><a class="" href="/about-us/">About</a></li>
                             <li class="dropdown"><a class="" href="/contents/" target="_blank">Contents</a>
                                <ul>
                                <li><a class="sub_" href="/contents/youtube/">Youtube</a></li>
                                <li><a class="sub_" href="/contents/blog/">Blog</a></li>
                                </ul>
                             </li>
                             <li><a class="" href="https://www.amazon.co.jp/">Shop</a></li>
                             <li><a class="" href="/contact-form/" target="_blank">Contact</a></li>
                         </ul>
                    </nav>
          </div>
     </header>
<script>
    let header_fixed = true;
</script>
<script src="/static/js/menu_header_wagtail.js"></script>
        
<main class="main">
    <div class="contain">
         <div class="container-fluid bg-dark text-light p-5 " style="background-image: url('/media/images/study.2e16d0ba.fill-900x400.jpg'); background-size: contain">
              <div class="row">
                   <div class="col-12 text-center">
                        <div class="row  justify-content-center">
                             <div class="post-heading">
                                  <h2>introduction</h2>
                                  <p class="subheading">welcome! This is squeeze japanese website</p> 
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</main>
</body>
</html>

nonoshu

2021/07/28 13:02

現状の質問文ですと質問者さんの期待する結果がいまいちピンと来ません。バナーはページの最下部に表示したいと考えておられますか？それとも別の場所でしょうか？

Kazuhiro-ch

2021/07/28 13:15

ご回答ありがとうございます。自分の期待する結果はメニューバーの真下にかぶさることなく、表示されるということです。

nonoshu

2021/07/28 13:25

質問文を編集出来ますので期待する結果を追記下さい。それと、何度も質問で申し訳ありませんが質問文では「メニューバーの下にバナーが入り込みます。」上のお返事では「メニューバーの真下にかぶさることなく、表示される」違いがいまいちピンと来ません。

Kazuhiro-ch

2021/07/28 13:36

追記の件、承知いたしました。現在画像のとおり、メニューバーがバナーの写真の上にかぶさっており、文字であったり画像そのものが隠れてしまっています。それを隠れることなく表示したいです。下にスクロールしたときにかぶさることは問題ありません。開いた瞬間の画面がすでにかぶさっており、見づらいということが今回の問題点であり、解決したいポイントです。

Lhankor_Mhy

2021/07/28 14:21

CSSの問題なのであれば、レンダリングされたHTMLをご提示いただいた方が、回答を得られやすいと思います。現状ですと、wagtail と CSS の両方に詳しい回答者でないと答えられないでしょう。

Kazuhiro-ch

2021/07/28 14:41

レンダリングされたHTMLは下のHTMLです。解釈違いであれば申し訳ございません。

Lhankor_Mhy

2021/07/29 00:40

レンダラに渡されるテンプレートHTMLではなくて、レンダラから返されたHTMLがあった方がよい、ということが申し上げたかったことです。つまり、ブラウザ上のソースに表示されているHTMLという意味で申し上げました。

Kazuhiro-ch

2021/07/29 04:46

なるほど！意味が分かりました！早急に対応します

Lhankor_Mhy

2021/07/29 05:20

ご対応ありがとうございます。コードを試してみましたが、問題が再現しませんでした。ご提示いただいていないCSSの問題か、wagtailの問題かと思われます。

Kazuhiro-ch

2021/07/29 05:35

正常に動きましたか？cssはbootstarapを使用しています。メニューバーはライブラリを使用してインストールしました。メニューを非表示にするときちんとHTML上のトップから表示されます。おそらくメニューが上から重なっているのではないかと考えます。これはメニューバーの問題でしょうか？それともバナーを下におろす必要があるのでしょうか？

Lhankor_Mhy

2021/07/29 05:52

メニューが上から重なる現象を確認できませんでしたので、申し上げられることがございません。 Kazuhiro-chさんの環境では、ご提示いただいている最後のHTML**だけ**で、問題を確認することができますか？もし、できるのであれば、環境の問題かと思います。もし、できないのであれば、ご提示いただいていないCSSの問題か、wagtailの問題かと思われます。

Lhankor_Mhy

2021/07/30 01:51

もうSOに移動して、こっちは読んでないのかな……？個人的には let header_fixed = true あたりが怪しいと思いますね。wagtailのスクリプトでなんかしてるんじゃないかと。

Kazuhiro-ch

2021/07/30 05:29

ありがとうございます。昨日は一日これらの問題解決に時間を費やし、なんとか解決できることができました。皆さんのおっしゃられる通り、HTMLとCSSの基本的な問題でした。ありがとうございます。

Lhankor_Mhy

2021/07/30 05:30

ご解決されて何よりです。お手数ですが、自己解決の処理をお願いします。