スマートフォン、パソコン共にdiv下の不自然な余白(空白)をなくしたい。

Question

前提・実現したいこと

スマートフォン、パソコン共にdiv下の不自然な余白(空白)をなくしたい。

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

パソコンでは問題ないのですが、スマートフォンでdiv(class名sub-main)の高さが高くなってしまい下に謎の余白(空白)が出来てしまっている状態です。
chromeのデベロッパーツールで見ると、divの高さが不自然に高くなっており、margin・paddingで丈が伸びたのではないようです。
該当URL：http://www.atalde.jp/index.html

エラーメッセージ

該当のソースコード

HTML

<div class="box-wrap">
<div class="container header">
<nav class="navbar navbar-expand-md navbar-light p-4" style="background-color: #FFFFFF;">
<a class="navbar-brand col-3" href="index.html"><img class="logo" src="images/title.svg" alt="logo" width="224" height="32" loading="lazy"></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/simple_menu.svg" alt="menu" width="39" height="39">
</button>

<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active"><a href="index.html"><span>HOME</span></a></li>
<li class="nav-item"><a href="Profile.html">PROFILE・EXHIBITION</a></li>
<li class="nav-item"><a href="Reliure.html">RELIURE</a></li>
<li class="nav-item"><a href="Gallery.html">GALLERY</a></li>
<li class="nav-item"><a href="Lesson.html">LESSON</a></li>
<li class="nav-item"><a href="http://atalde.exblog.jp/">BLOG</a></li>
<li class="nav-item"><a href="https://www.instagram.com/bookbinding_reliure/"><img src="images/Instagram_icon.jpg" alt="instagram"></a></li>
</ul>
</div>
</nav>
</div>
<!-- END: header -->
<div>
<div><img class="top-img" src="images/img_large_1.jpg" alt="relieur"></div>
</div>
<div class="sub-main">
<div class="container">
<div class="row">
<div class="col-md-7 col-xl-7 animate-box">
<p class="top-text">アトリエ・アルド(atelier ALDE)は、市田文子のルリユール工房です。<br>ルリユール制作の他、ルリユール教室と製本ワークショップを開いています。<br>ルリユールの注文についてご質問がありましたらお気軽にお問い合わせください。<br>ご連絡は<a href="mailto:&#109;ai&#108;to&#58;atelie&#114;a&#108;&#100;&#101;&#64;atalde.j&#112;">こちら</a>まで。</p>
</div>
<div class="col-md-5 col-xl-5 NEWS">
<div>
<p class="event-title"><b>NEWS</b></p>
<div class="cover-hero animate-box event">
<a href="Advance_billing.html"><img class="img-max" src="images/work-2.jpg" alt="イベント情報"></a>                            
<p>今後、展示会やワークショップ等の開催の情報をお知らせ致します。</p>                            
</div>            
</div>
</div>
</div>
</div>
</div>        
<footer>
<p class="footer">Copyright© 2018-2020 atelier ALDE All Rights reserved.</p>
</footer>
</div>

該当のソースコード

CSS

html {
　　margin: 0;
  　padding: 0;
}

body {
  font-family: "Open Sans", Arial, serif;
  line-height: 1.8;
  font-size: 20px;
  background: #f9f7f7;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

a {
  color: #a980cd;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover {
  text-decoration: underline !important;
  color: #a980cd !important;
}
a:focus, a:active {
  outline: none;
}

p {
  margin-bottom: 1.5em;
  font-size: 20px;
  color: #727272;
  font-weight: 300;
  font-family: "Open Sans", Arial, serif;
}

h1, h2, h3, h4, h5, h6 {
  color: rgba(0, 0, 0, 0.8);
  font-family: "Open Sans", Arial, serif;
  font-weight: 400;
  margin: 0 0 30px 0;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
}

.img-max {
  max-width: 100%;
}

::-webkit-selection {
  color: #fcfcfc;
  background: #bdaeca;
}

::-moz-selection {
  color: #fcfcfc;
  background: #bdaeca;
}

::selection {
  color: #fcfcfc;
  background: #bdaeca;
}

.box-wrap {
  background: #fff;
  max-width: 1370px;
  margin: 0 auto;
  position: relative;
  -webkit-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.07);
  min-height: 100vh:
}
.box-wrap:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  -webkit-box-shadow: -7px 1px 13px 2px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: -7px 1px 13px 2px rgba(0, 0, 0, 0.08);
  box-shadow: -7px 1px 13px 2px rgba(0, 0, 0, 0.08);
}

.header {
  hight: 50px;
}

.footer {
    font-size: 0.65em;
    text-align: center;
}

試したこと

html、bodyのheight; 100%;を削除した上で、全体を包んでいるdivのclass(.box-wrap)にmin-height: 100vh;を追加してみましたが解決しませんでした。

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

作業環境：Dreamweaver 2020
確認ツール：デベロッパーツール(chrome)

Comments

[ex025]

コードはコードブロックを使用して記載してください。
```HTML
コード
```
```CSS
コード
```
のように変更してください。

[itosugi]

ご指摘ありがとうございます。先ほどコードブロックを使い入力し直しました。
始めての質問なので勝手が分かっておりませんでした。

Answer 1

モバイル時(画面サイズが狭い場合)のスタイルが原因です
cover-heroを削除してください。

<!-- <div class="cover-hero animate-box event"> -->
<div class="animate-box event">

追伸
他のCSSファイル読み込み記載を削除されると再現できなくなります。
後コード関連は「コードの挿入」で囲んで下さい。

Comments

[itosugi]

早速の回答本当にありがとうございます。
先ほど、ご教授通り修正・更新をした所あっさり直りました。
コードの挿入、についてもご指摘ありがとうございます。
こちらも入力し直しました。