SP画面時スライドナビを表示すると下にあるはずのボタンの要素も表示されてしまいます。それを消したいです。

#スライドナビの上に表示されてしまう　contactの表示を消したいです。

##ポートフォリオ制作中です。
vscodeを使っています。
Googleの検証ツールでは問題ないのですが、アップロードして確認すると、スマホ画面時にハンバーガーメニューを押して
表示されるスライドナビの上に、contactの表示が乗ってしまいます。
トップページ下の方のcontactエリアでスライドナビを表示すると現れます。

同様にaboutエリアのread moreのボタンも同じく表示されていたのは解決したのですが、同じようにしても解決しません。

###■試した事
z-indexを調べ、スタック文脈について学習しました。
そこでaboutとcontactのセクションに
position:relative;
z-index: 50;
を着けてスタック文脈を形成しました。
headerが
position: fixed；　
z-index: 100;です。

aboutエリアとcontactエリアをz-index: 50;にし、中のspanはローカルスタック文脈であると考えました。
aboutは成功？して表示が消えたのですが、同じ構造なのにcontactは消えません。

検証ツール上では確認できないのでホームページで見ていただきたいです。
https://www.webandtomoyo.com
とても困っています。
説明が下手で申し訳ありませんが、どうかお力を貸してください。

文字数が多くて載せられないので、HTML CSS省略しています。

該当のソースコード

html
1
2   
3    <main>
4        <!-- about始まり -->
5        <section class="about">
6            <div class="container">
7                <div class="wrapper fadeIn">
8                    <div class="section_title">
9                        <h2>about</h2>
10                    </div>
11                    <div class="about_inner fadeIn">
12                        <div class="about_text">
13                            <p>
14                                はじめまして。<br>
15                                tomoyoと申します。<br>
16                                年齢は40代半ば。中学１年生と小学３年生の二人の女の子の母親です。<br>
17                                私にとってパソコンを使うといえば、検索をしたり、YouTubeを観たり、ショッピングをしたり。ごく稀に幼稚園や学校の保護者や町内の子供会で配るお手紙を製作する程度でした…
18                            </p>
19/////////////////////この部分が同じ様に表示されていましたが、親要素の.aboutにposition: relativeとz-index: 50 を着けて、子要素にもz-index: 10を付け表示か消え見ました。
20                            <div class="more">
21                                <a href="about.html" class="btn"><span class="btn_flont">read more</span><span class="btn_back">click!</span></a>
22                            </div>
23///////////////////////////////////////////////////////////////////////////////////////////////////
24                        </div>
25                        <div class="about_img">
26                            <img src="img/me2.png" alt="tomoyoの写真">
27                        </div>
28                    </div>
29                </div>
30            </div>
31        </section>
32        <!-- about終わり -->
33
34
35
36        <!-- contact始まり -->
37        <section class="contact">
38            <div class="container">
39                <div class="wrapper fadeIn">
40                    <div class="section_title">
41                        <h2>contact</h2>
42                    </div>
43
44///////////この部分がSP時スライドナビの上に表示されてしまいます。///////////////////////////
45                    <div class="contact_btn">
46                        <a href="contact.html" class="btn"><span class="btn_flont">contact here</span><span class="btn_back">click here!</span></a>
47                    </div>
48///////////////////////////////////////////////////////////////////////////////
49                </div>
50            </div>
51        </section>
52        <!-- contact終わり -->
53    </main>
54
55

css
1// about始まり
2.about {
3    position: relative;
4    z-index: 50;
5    & .about_inner {
6        display: flex;
7        justify-content: space-between;
8        align-items: center;
9        @include sp {
10            flex-direction: column;
11        }
12
13        & .about_text {
14            width: 44%;
15            @include sp {
16                order: 2;
17                width: 100%;
18            }
19            & .btn {
20                display: inline-block;
21                width: 150px;
22                height: 50px; 
23                line-height: 50px;         
24                text-align: center;
25                background-color: #fff;
26                font-size: 1.125rem;
27                transition: all .3s;
28                position: relative;
29                z-index: 20;
30                @include sp {
31                    width: 130px;
32                    height: 40px;
33                    line-height: 40px;
34                    font-size: 1rem;     
35                }
36                // hoverで全面が倒れる
37                &:hover .btn_flont {
38                    transform: rotateX(90deg);
39                }
40                // hoverで背面が起き上がる
41                &:hover .btn_back {
42                    transform: rotateX(0deg);
43                    border: none;
44                }
45                
46                & span {
47                    width: 100%;
48                    height: 100%;
49                    display: block;
50                    border: 0.5px solid #0b0b0b;
51                    position: absolute;
52                    /* 重なりを3Dで表示 */
53                    transform-style: preserve-3d;
54                    /* アニメーションの設定 数字が少なくなるほど早く回転 */
55                    transition: 0.5s;
56                    
57    
58                    &:nth-child(1) {
59                        background-color: #fff;
60                        color: #0b0b0b;
61                        transform: rotateX(0deg); //初めは回転なし
62                        transform-origin: 0 50% -25px; //回転する起点
63                        z-index: 10;
64                    }
65        
66                    &:nth-child(2) {
67                        background-color: #98A0BF;
68                        color: #fff;
69                        border: 0.5px solid #98A0BF;
70                        transform: rotateX(-90deg);
71                        transform-origin: 0 50% -25px;
72                        z-index: 10;
73                    }           
74                }
75            }
76    
77
78        }
79
80        & .about_img {
81            width: 38%;
82            @include sp {
83                order: 1;
84                width: 80%;
85            }
86            
87            & img {
88                width: 100%;
89                box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
90            }
91        }
92
93    }
94}
95// about終わり
96
97
98
99// contact始まり
100.contact {
101    position: relative;
102    z-index: 40;
103
104    & .wrapper {
105        height: 250px;
106        padding: 40px;
107        margin-top: 100px;
108        margin-bottom: 200px;
109        background-color: #F8F8F8;
110        border: 2px dashed #0b0b0b;
111        text-align: center;
112        
113        & .btn {
114            display: inline-block;
115            width: 300px;
116            height: 60px; 
117            line-height: 60px;         
118            text-align: center;
119            background-color: #fff;
120            font-size: 1.125rem;
121            transition: all .3s;
122            position: relative;
123            z-index: 20;
124            @include sp {
125                width: 240px;
126                font-size: 1rem;     
127            }
128            // hoverで全面が倒れる
129            &:hover .btn_flont {
130                transform: rotateX(90deg);
131            }
132            // hoverで背面が起き上がる
133            &:hover .btn_back {
134                transform: rotateX(0deg);
135                border: none;
136            }
137            
138            & span {
139                width: 100%;
140                height: 100%;
141                display: block;
142                border: 0.5px solid #0b0b0b;
143                position: absolute;
144                /* 重なりを3Dで表示 */
145                transform-style: preserve-3d;
146                /* アニメーションの設定 数字が少なくなるほど早く回転 */
147                transition: 0.5s;
148                
149
150                &:nth-child(1) {
151                    background-color: #fff;
152                    color: #0b0b0b;
153                    transform: rotateX(0deg); //初めは回転なし
154                    transform-origin: 0 50% -25px; //回転する起点
155                    z-index: 10;
156                }
157    
158                &:nth-child(2) {
159                    background-color: #98A0BF;
160                    color: #fff;
161                    border: 0.5px solid #98A0BF;
162                    transform: rotateX(-90deg);
163                    transform-origin: 0 50% -25px;
164                    z-index: 10;
165                }           
166            }
167        }
168    }
169}
170コードの表示(ブロック)