ハンバーガーメニューをアクティブにした後の画面のCSSの編集がうまくいきません。

前提

ハンバーガーメニューをアクティブにした後の画面の[無料体験に申し込む]ボタンのCSSの編集がうまくいきません。

実現したいこと

ハンバーガーメニューをアクティブにした後の画面の[無料体験に申し込む]ボタンのCSSの編集して背景色を白色に変えたいのですがうまくいかず、困ってます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8"/>
5	<meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>課題テンプレ</title>
7    <link rel="stylesheet" href="css/style.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
10    <script src="js/script.js"></script>
11 
12</head>
13
14<body>
15    <header id="header">
16        <div class="logo">
17            <h1 class="title">BBB</h1>    
18            <span>英会話スクール</span>
19        </div>
20        <nav id="navi">
21            <ul class="menu">
22              <li><a href="#reason">BBBが選ばれる理由</a></li>
23              <li><a href="#voice">受講生の声</a></li>
24              <li><a href="#summary">スクールの概要</a></li>
25            </ul>
26            <a class="btn" id=" active_btn"href="#">無料体験に申し込む</a>
27          </nav>
28        <div class="hamburger">
29            <span></span>
30            <span></span>
31            <span></span>
32          </div>
33    </header>
34    <main>
35        <div id="mainvisual">
36            <img src="../web3/img/mainvisual1.jpg" alt="main1">
37       
38        </div>
39        <div class="text">
40            <P class="title">話して学ぼう<br> BBB英会話スクール
41            </P>
42            <a class="btn" href="#">無料体験はこちらから </a>
43        </div>
44        
45</body>
46</html>

CSS
1*{
2    margin:0;
3    padding:0;
4}
5.logo{
6    color: red;
7    vertical-align: bottom;
8    line-height: 25px;
9}
10.logo.active{
11  color: white;
12}
13
14  .title.active{
15    text-shadow: none;
16  }
17
18body.active{
19  background: red;
20}
21
22.title{
23  text-align: left;
24  font-size:45px;
25  font-weight: bold;
26  text-shadow: 0 4px 6px #fff;
27}
28 #header{
29  padding: 40px 0 0 50px;
30 }
31.logo span{
32    vertical-align: bottom;
33    font-size: 15px;
34}
35#navi{
36  visibility: hidden;
37  transition: 1.0s;
38}
39
40main.active, footer.active{
41 opacity: 0;
42}
43.btn.active{
44  border: none;
45  width: 250px;
46  margin: 0 auto;
47  border-radius: 0%;
48  border: #fff solid 1px;
49  color: white;
50}
51
52.menu li{
53  margin-bottom: 20px;
54}
55.menu.active{
56  color: white;
57  opacity:1;
58  z-index: 5;
59}
60#navi.active{
61  margin-top: 30px;
62  left: 470px;
63  position: fixed;
64  visibility: visible;
65}
66#navi.active a{
67  color: white;
68}
69.hamburger{
70  background-color: #ff2a2a;
71    position: fixed;
72    width: 100px;
73    height: 100px;
74    top: 0;
75    right: 0;
76    z-index: 30;
77    cursor: pointer;
78    transition: 0.3s;
79}
80.hamburger span{
81    width: 35px;
82    height: 2px;
83    position: absolute;
84    left: 33px;
85    background: white;
86}
87.hamburger span:nth-child(1){
88  top: 24px;
89  transition: 1.0s;
90}
91.hamburger span:nth-child(1).active{
92  transform: rotate(45deg);
93  top: 38px;
94}
95
96.hamburger span:nth-child(2){
97  top: 40px;
98}
99.hamburger span:nth-child(2).active{
100  display: none;
101}
102.hamburger span:nth-child(3){
103  top: 55px;
104  transition: 1.0s;
105}
106.hamburger span:nth-child(3).active{
107  transform: rotate(-45deg);
108  top:40px
109
110}
111
112    .btn{
113      background-color: #ff2a2a;
114      border-bottom: 6px solid #9a0413;
115      border-radius: 10px;
116      color: #fff;
117      font-size: 1.5rem;
118      display: block;
119      padding: 15px 40px;
120      margin-top: 20px;
121      text-align: center;
122      transition: 0.3s;
123      position: relative;
124      text-decoration: none;
125      transition: 0.3s
126    }
127    .btn::after{
128      content: "";
129      width: 16px;
130      height: 16px;
131      border-top: solid 3px #fff;
132      border-right: solid 3px #fff;
133      transform: rotate(45deg);
134      position: absolute;
135      top: 26px;
136      right: 30px;
137    }
138    .btn.active::after{
139      border: none;
140    }
141    .btn:hover {
142      transform:scale(1.2);
143    }
144    #active_btn:hover{
145      background-color: white;
146    }
147: 0;
148  }      
149
150     
151
152   /* ウィンドウ幅が0〜479pxの場合に適用するCSS */
153@media screen and ( max-width:640px )
154{
155    #header ,#navi ,main, #voice ,.student,.student dt,.student dd,.summary-list div,footer,.footmenu{
156      width: 100%;
157    }
158    body.active{
159      width: 100%;
160      background: red;
161    }
162.logo.active{
163  display: block;
164  text-align: center;
165  color: white;
166}
167
168    .hamburger{
169      right:0;
170    }
171    .text{
172      top: 350px;
173    left: 0;
174    }
175    .title{
176      font-size: 40px;
177    }
178    .slide{
179      width: 80%;
180      margin: 0 auto;
181      box-sizing: border-box;
182    }
183    .student div{
184      flex-direction: column;
185    }
186    
187  .student div:nth-child(2) {
188   flex-direction:column
189  }
190    .student dt {
191      align-items: center;
192    }
193.footmenu{
194  align-items: center;
195  display: flex;
196  flex-wrap: wrap;
197}
198
199}

javascript
1$(function(){
2    $('.hamburger').on('click', function() {
3    $('body,.title,.logo,.hamburger, .hamburger span:nth-child(1), .hamburger span:nth-child(2),.hamburger span:nth-child(3),.logo,#navi,.btn,main,footer,body').toggleClass('active');
4    });
5    });
6
7
8よろしくお願いします。
9
10

jem32o_

2022/08/04 13:30

htmlのid=" active_btn"href="#" こういうactive_btn前の半角スペースとかhrefがidのidのダブルクォーテーションがくっついていたり、 cssの.logo.activeのように「.logo .active」logo後ろと「.」前にスペースないとかでcss機能していないところ多々あるのでまずそういうの見直すべきでは？