bootstrapのnavbar

前提・実現したいこと

ナビゲーションバーが広がった時、その下部分も同様にして下へ移動するようにしたい。

発生している問題・エラーメッセージ

ナビゲーションが広がると、h1要素と被ってしまい閉まるボタンが押せなくなる。

エラーメッセージ

該当のソースコード

ソースコード
```<header >
      <div class="pos-f-t" style="display:fixed; position:absolute !important;width:100%;height:10%;">
        <div class="collapse" id="navbarToggleExternalContent">
          <div class="bg-dark p-4">
            <div class="nav-content d-flex justify-content-start">
              <div class="nav-logo-img">
                <img src="logo.png" alt="logo" style="position:relative; top:-20px;">
              </div>
              <div class="nav-list">
                <ul style="list-style:none;position:absolute;top:25px;">
                  <li style="float:left;">
                    <button id="btn1"type="button" name="button">基本情報</button>
                  </li>
                  <li style="float:left;">
                    <button type="button" name="button">準備</button>
                  </li>
                  <li  style="float:left;">
                    <button type="button" name="button">安全対策</button>
                  </li>
                  <li style="float:left;">
                    <button type="button" name="button">マネープラン</button>
                  </li>
                </ul>
              </div>
              <div class="header-content-2 ml-auto"style="color:white; border:none;">
                <button type="button" name="button" style="color:white; border:none; background-color:inherit;">始める</button>
              </div>
            </div>
          </div>
        </div>
        <nav class="navbar navbar-dark bg-dark">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </nav>
      </div>

    </header>
<div class="background-image" style="height:90%; width:100%; position:absolute; top:105px; left:0px; margin-top:10%;">
  <div class="main-photo" style="display:block;"></div>
</div>
<div class="main-content">
  <h1><img src="uni.title.png" alt="logo-image" style="position:relative; "></h1>
.
.
【略】
.
.
</div>

css
      .nav-list button{
        border:none;
        background-color:inherit;
        color:white;
      }
      .nav-list button:hover{
        color:violet;
      }
      .header-content-2 button:hover{
        color:violet;
      }
      .nav-list li{
       height:inherit;
      }
      .main-photo {
        background:url("background2.jpg") no-repeat center;
        width:100%; height:100%;
        position:relative;
        background-size:cover;
        background-attachment:fixed;
      }
      .main-content{
        position:absolute;
        width:100%;
        height:90%;
        overflow:;
        margin-top:10%;
      }
      .main-content h1{
        width:496px;
        margin:0 auto;
        padding-top:25px;
      }

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

cerfweb

2019/03/20 15:28

コードを記載する際はコードボックスに入れてください。（Markdown記法）コードは```（バッククォート3つ）で囲んでその前後に改行を入れるか<code>をクリックするとコードボックスになりますので、やってみてください。それから、インデントを入れるなどしていただいた方が回答する側にとっても問題点が見つけやすくなりますのでお願いします。回答者は報酬をもらっているわけでもなく全くの善意でやっていますのでお気遣いください。