iSara模写でレスポンシブ対応でヘッダーがはみ出る

前提・実現したいこと

iSaraの模写コーディングでレスポンシブ対応にしているのですが、検証ツールでレスポンシブで見てみたらヘッダーがはみ出てしまいます。はみ出るというか、PCサイズで100%のまま変わらないです。メディアクエリもmax-width:767pxでしっかり設定しています。

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

該当のソースコード

HTML
1<header class="main-header">
2        <div class="header-content">
3          <div class="header-title">
4            <div class="main-logo"><img src="./images/isaralogo.png" alt="isara"></div>
5          <p class="header-txt">バンコクのノマドエンジニア育成講座</p>
6          </div>
7          <div class="for-sm-form">
8          <div class="form-img"><img src="./images/form.png" alt="form-img"></div>
9          <a href="#form" class="form-sub-link">資料請求</a>
10        </div>
11          <a class="form-link" href="#form">お問い合わせ / 資料請求はこちら</a> 
12        </div>
13      </header>
14

CSS
1@media screen and (max-width:767px){
2.header-title{
3    display:flex;
4}
5.main-logo{
6    width: 130px;
7}
8.header-txt{
9    margin: 20px 0 0;
10    font-weight: bold;
11    font-size: 14px; 
12}
13.header-content{
14    display: flex; 
15    justify-content: space-between;
16    padding: 20px 40px;
17    max-width: 100%;
18}
19.main-header{
20background-color: white; 
21position: fixed;
22top: 0px;
23left:0px;
24z-index: 10;
25width: 100%;
26}

CSS
1.header-content{
2    padding: 0;
3    height: 62px;
4}
5.header-title{
6    flex-direction: column-reverse;
7    padding: 5px 10px;
8}
9.header-txt{
10    margin: 0;
11    font-size: 10px;
12}
13.main-logo{
14  width: 90px;
15  height: 100%;
16}
17}