>>5
分かりやすいご説明ありがとうございます、、！！
こちらはトップページで使用しています。
今気付いたのですが、このCSSをトップページHEAD間ではなく共通HEAD間編集で保存していました。なにか違いがありますかね……？

HTMLを下に記載しておきます。
フッターの欄にテンプレートサイトさんのURLとお名前がありましたので一応伏せさせて頂きますね。


​───────​───────

<div class="pageWrap">

<!-- モバイル用メニュートリガー -->
<div id="navTrigger" class="navTrigger mobile"></div>

<!-- ナビゲーション -->
<div id="mainNavWrap" class="mainNavWrap">
<nav id="mainNav" class="mainNav">
<div class="navInfo">
<h1>サイト名</h1>
<div class="url">https://yoursiteurl.jp/</div>
</div>

<ul>
<li><a href="#link_info">information</a></li>
<li><a href="#link_contents">contents</a></li>
<li><a href="#link_mail">mailform</a></li>
</ul>
</nav>
</div>
<!-- /ナビゲーション -->


<!-- ヘッダー -->
<header id="mainHeader" class="mainHeader">
<div class="headerBox">
<div class="siteTitle">yoursite<br>name</div>
<div class="siteInfo">unofficial <span>xxx</span> site.</div>
</div>
</header>
<!-- /ヘッダー -->


<!-- メイン部分 -->
<div class="contentsWrap">

<section id="link_info" class="box">
<h2>information</h2>
<p>ここは何々を取り扱う何々サイトです。</p>
</section>

<section class="box">
<h2>sample(h2)</h2>
<h3><span>heading3</span></h3>
<h3><span>見出し３</span></h3>
<h4>heading4</h4>
<p><a href="">リンク</a>と<em>強調</em>と<strong>もっと強調</strong></p>
</section>

<!-- 小説部分 -->
<section id="link_contents" class="box novel">
<h2>main contents</h2>
<p>最新→下線付き</p>

<h3><span>name change</span></h3>
<!-- 名前変換フォーム（ダミー） -->
<form class="nameChange space">
<input type="text" placeholder="名字" class="enter"><input type="text" placeholder="名前" class="enter"><input type="submit" value="input" class="button">
</form>
<!-- /名前変換フォーム（ダミー） -->


<h3><span>long1</span></h3>

<!-- 長編リスト（画像なし） -->
<ul class="longList space">
<li><a href="">タイトル</a>
<div class="longInfo">あらすじあらすじ全何話</div>
</li>
<li><a href="">タイトル</a>
<div class="longInfo">あらすじあらすじ</div>
</li>
<li><a href="">タイトル</a>
<div class="longInfo">あらすじあらすじ</div>
</li>
</ul>
<!-- /長編リスト（画像なし） -->


<h3><span>long2</span></h3>

<!-- 長編リスト（画像あり） -->
<ul class="longList2 space">
<li>
<a href="">
<div class="longImage"><img src="画像URL" alt="image"></div>
タイトル
<div class="longInfo">あらすじあらすじ全何話</div>
</a>
</li>

<li>
<a href="">
<div class="longImage long_2 light"><img src="画像URL" alt="image"></div>
タイトル
<div class="longInfo">色が薄い画像のときはclass="light"で枠線の色が変わります。</div>
</a>
</li>

<li class="new">
<a href="">
<div class="longImage"><img src="画像URL" alt="image"></div>
タイトル
<div class="longInfo">あらすじあらすじ</div>
</a>
</li>
</ul>
<!-- /長編リスト（画像あり） -->


<h3><span>short</span></h3>

<!-- 短編リスト -->
<ul class="shortList space">
<li><a href="">リンクサンプル</a><span>既読</span></li>
<li><a href="URL">リンクサンプル</a><span>未読</span></li>
<li class="new"><a href="">タイトル</a><span>注意</span></li>
<li><span class="left">注意（左）</span><a href="">タイトル</a></li>
<li><a href="">タイトル</a></li>
</ul>
<!-- /短編リスト -->
</section>



<section id="link_mail" class="box">
<h2>mainform</h2>
<p>なにかありましたらどうぞ！</p>

<!-- メールフォーム（ダミー） -->
<form class="mailForm space">
<input type="text" placeholder="お名前" class="enter"><br>
<textarea cols="30" rows="3" placeholder="メッセージを入力してください。" class="enter"></textarea><br>
<input type="submit" value="送信" class="button"><input type="reset" value="消去" class="button">
</form>
<!-- /メールフォーム（ダミー） -->

</section>
</div>
<!-- /contentsWrap -->


<!-- フッター（削除OK※デフォルト非表示） -->
<footer class="mainFooter">
designed by <a href="https://○○○○.jp" rel="noopener">○○</a>
</footer>

</div>
<!-- /pageWrap -->

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){

//ハンバーガーメニュー
var wrap = $('#mainNavWrap');

$('#navTrigger').on('click', function(){
wrap.toggleClass('view');
})

wrap.on('click', function(){
$(this).removeClass('view');
})


//ページ内スクロール
$('a[href^="#"]').on('click', function(){
var target = $($(this).attr('href'));
var point = target.offset().top - 40;

$('html, body').animate({scrollTop : point}, 900)
wrap.removeClass('view')

return(false)
})
})
</script>