headerとfooterをばらけさせたい

実現したいこと

ヘッダーとフッターが重なることなく存在するようにしたい。

発生している問題・分からないこと

これまで作っていたトップページからコピーして個別ページを作成しようとしています。
その際にヘッダーとフッターが重なってしまってどうやって分けたらいいのか知りたいです。

該当のソースコード

HTML
1<body>
2  <div class="mainMenu" id="js-headFixed">
3    <h1><a href="" class="text-font">GENSEN</a><span><a href="" class="text-font">全国おすすめ温泉・温泉宿情報サイト</a></span></h1>
4    <nav>
5      <li>
6        <p class="mainMenuList">AREA</p>
7        <ul class="subMenuNav">
8          <li><a href="">北海道</a></li>
9          <li><a href="">東北</a></li>
10          <li><a href="">甲信越・北陸</a></li>
11        </ul>
12      </li>
13      <li>
14        <p class="mainMenuList">CATEGORY</p>
15        <ul class="subMenuNav">
16          <li><a href="">家族風呂</a></li>
17          <li><a href="">露天風呂</a></li>
18          <li><a href="">源泉かけ流し</a></li>
19        </ul>
20      </li>
21      <li>
22        <p class="mainMenuList">SPECIAL</p>
23        <ul class="subMenuNav">
24          <li><a href="">人気の温泉特集</a></li>
25          <li><a href="">露天風呂特集</a></li>
26          <li><a href="">絶品グルメ特集</a></li>
27        </ul>
28      </li>
29      <li>
30        <p class="mainMenuList">BLOG</p>
31        <ul class="subMenuNav">
32          <li><a href="">通常ブログ</a></li>
33          <li><a href="">アーカイブページ</a></li>
34          <li><a href="">お知らせ一覧ページ</a></li>
35        </ul>
36      </li>
37      <li><a class="mainMenuList"  href="">CONTACT</a></li>
38    </nav>
39  </div>
40  <footer>
41    <div class="footer-topFlex">
42      <div class="footer-topFall">
43        <img src="/image/footer/footer-fall.jpeg" alt="">
44      </div>
45      <div class="footer-topLink">
46        <ul>
47          <li><a href="">お知らせ</a></li>
48          <li><a href="">特集一覧</a></li>
49          <li><a href="">よくある質問</a></li>
50          <li><a href="">お問い合わせ</a></li>
51          <li><a href="">運営会社</a></li>
52          <li><a href="">公式ブログ</a></li>
53          <li><a href="">利用規約</a></li>
54        </ul>
55      </div>
56      <div class="footer-topArea">
57        <ul>
58          <li><a href="">エリア一覧</a></li>
59          <li><a href="">北海道</a></li>
60          <li><a href="">東北</a></li>
61          <li><a href="">関東</a></li>
62          <li><a href="">北陸・甲信越</a></li>
63          <li><a href="">東海</a></li>
64          <li><a href="">近畿</a></li>
65          <li><a href="">中国・四国</a></li>
66          <li><a href="">九州・沖縄</a></li>
67        </ul>
68      </div>
69      <div class="footer-topEpicContainer">
70        <div class="footer-topEpicBox">
71          <a href="#" class="footer-topEpic">
72            <img src="/image/footer/footer-lump.jpeg" alt="">
73            <div class="footer-topEpicText text-font">全国人気の温泉宿特集</div>
74          </a>
75          <a href="#" class="footer-topEpic">
76            <img src="/image/footer/footer-food.jpeg" alt="">
77            <div class="footer-topEpicText text-font">高級温泉宿の美味特集</div>
78          </a>
79        </div>
80      </div>
81    </div>
82    <div class="footer-bottom">
83     <div class="footer-bottomFlex">
84        <ul>
85          <li><a href=""><i class="fa-brands fa-x-twitter"></i></a></li>
86          <li><a href=""><i class="fa-brands fa-facebook-f"></i></a></li>
87          <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
88          <li><a href=""><i class="fa-brands fa-tiktok"></i></a></li>
89        </ul>
90        <div class="footer-bottomLink">
91          <h2><a class="text-font" href="">GENSEN</a></h2>
92          <div class="footer-bottomLinkText">
93            <a href="">プライバシーポリシー</a>
94            <a href="">会社概要</a>
95            <a href="">運営について</a>
96            <a href="">お問い合わせ</a>
97          </div>
98        </div>
99        <div class="footer-bottomCopy">
100          <p>Copyright<span>&copy;</span><a href="">GENSEN(tcd050)</a>.All Rights Reserved.</p>
101        </div>
102      </div>
103    </div>
104  </footer>
105  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
106  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
107  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
108  <script src="/js/index.js"></script>
109</body>
110</html>

css
1.mainMenu{
2  height: 60px;
3  width: 100%;
4  z-index: 3;
5  background-color: rgba(0,0,0,0);
6  position: absolute;
7  top: 0;
8  left: 0;
9  display: flex;
10  justify-content: space-between;
11  border-bottom: 1px solid rgba(255,255,255,0.4);
12  h1{
13    padding-left: 4em;
14    display: flex;
15    margin: 0;
16    align-items: center;
17    a{
18      font-size: 1.6em;
19      text-decoration: none;
20      color: $white_fff;
21    }
22    span{
23      display: block;
24      display: inline-block;
25      align-items: center;
26      height: 100%;
27      a{
28        display: flex;
29        align-items: center;
30        font-size: 0.8em;
31        height: 100%;
32        text-decoration: none;
33        margin-left: 1.3em;
34      }
35    }
36  }
37  nav{
38    padding-right: 8em;
39    display: flex;
40    align-items: center;
41    position: relative;
42    li{
43      position: relative;
44      list-style: none;
45      height: 100%;
46      display: flex;
47      align-items: center;
48      .mainMenuList{
49        cursor: pointer;
50        height: 100%;
51        display: flex;
52        align-items: center;
53        text-decoration: none;
54        color: $white_fff;
55        font-size: 1.4em;
56        margin-left: 2.5em;
57        &:hover + .subMenuNav,
58        .subMenuNav:hover {
59          width: 200px;
60        }
61      }
62      .subMenuNav{
63        margin-top: 0;
64        width: 0px;
65        top: 60px;
66        left: 0px;
67        z-index: 4;
68        padding-left: 0;
69        margin-bottom: 0;
70        position: absolute;
71        overflow: hidden;
72        &:hover{
73          width: 200px;
74        }
75        li{
76          width: 100%;
77          display: block;
78          padding: 1em 2em;
79          color: $white_fff;
80          font-size: 1.4em;
81          background-color: $light_brown;
82          box-sizing: border-box;
83          transition: all 0.4s ease;
84          &:hover{
85            width: 200px; 
86          }
87          a{
88            display: block;
89            color: $white_fff;
90            font-size: 1em;
91            text-decoration: none;
92          }
93        }
94      }
95    }
96  }
97}
98footer{
99  padding: 4em 12em;
100  background-color: $footer_back;
101  .footer-topFlex{
102    padding-bottom: 4em;
103    display: flex;
104    justify-content: space-between;
105    border-bottom: 1px solid $footer_border;
106    .footer-topLink{
107      ul{
108        li{
109          margin-bottom: 1em;
110          a{
111            color: $white_fff;
112            text-decoration: none;
113            font-size: 1.2em;
114            &:hover{
115              color: $link_hover;
116            }
117          }
118        }
119      }
120    }
121    .footer-topArea{
122      ul{
123        li{
124          margin-bottom: 1em;
125          a{
126            color: $white_fff;
127            text-decoration: none;
128            font-size: 1.2em;
129            &:hover{
130              color: $link_hover;
131            }
132          }
133        }
134      }
135    }
136    .footer-topEpicContainer{
137      .footer-topEpicBox{
138        .footer-topEpic{
139          display: block;
140          position: relative;
141          margin-bottom: 2em;
142          img{
143            width: 100%;
144            height: auto;
145            transition: opacity 0.4s;
146          }
147          &:hover{
148            img{
149              opacity: 0.5;
150
151            }
152          }
153        }
154        .footer-topEpicText{
155          top: 50%;
156          left: 50%;
157          transform: translate(-50%,-50%);
158          margin-top: 0;
159          margin-bottom: 0;
160          position: absolute;
161          color: $white_fff;
162          font-size: 2.4em;
163          width: 100%;
164          text-align: center;
165          font-weight: 500;
166          z-index: 3;
167          &:hover{
168            color: $white_fff;
169          }
170        }
171      }
172    }
173  }
174  .footer-bottom{
175    padding-top: 3em;
176    .footer-bottomFlex{
177      display: flex;
178      justify-content: space-between;
179      ul{
180        flex: 1;
181        height: auto;
182        align-items: center;
183        padding-left: 0;
184        display: flex;
185        li{
186          margin-right: 1.2em;
187          display: flex;
188          justify-content: center;
189          a{
190            i{
191              color: $white_fff;
192              font-size: 1.8em;
193            }
194          }
195        }
196      }
197      .footer-bottomLink{
198        flex: 1.5;
199        h2{
200          a{
201            text-align: center;
202            text-decoration: none;
203            font-size: 2.4em;
204            color: $white_fff;
205            display: flex;
206            justify-content: center;
207          }
208        }
209        .footer-bottomLinkText{
210          text-align: center;
211          margin-top: 2em;
212          a{
213            color: $white_fff;
214            text-decoration: none;
215            font-size: 1.4em;
216            margin-right: 1em;
217            position: relative;
218            &:not(:last-child)::before{
219              content: "";
220              right: -0.7em;
221              display: inline-block;
222              width: 1px;
223              height: 100%;
224              position: absolute;
225              background-color: $white_fff;
226              top: 0;
227            }
228          }
229        }
230      }
231      .footer-bottomCopy{
232        flex: 1;
233        display: flex;
234        width: 100%;
235        justify-content: right;
236        align-items: center;
237        p{
238          color: $white_fff;
239          font-size: 12px;
240          display: flex;
241          align-items: center;
242          span{
243            padding-right: 0.4em;
244            padding-left: 0.4em;
245            font-size: 1.2em;
246          }
247          a{
248            color: $white_fff;
249            margin-right: 0.4em;
250            &:hover{
251              color: $link_hover;
252            }
253          }
254        }
255      }
256    }
257  }
258}