body内にheader部分を収めたいのですが、headerが突き抜けてしまい横スクロールが生じてしまいます。(position: fixed;が問題？)

前提・実現したいこと

実現したいこととして、body内にheader部分を収めてbody内の横スクロールを消したいです。

ただいまhtmlにてサイトを作成中なのですがbody内に横スクロールが出てきて困っています。

ご協力お願いします。

該当のソースコード

html
1 <header> 
2    <div class="headerBox">
3      <div class="title">
4        <img src="img/logo.png">
5        <a href="#" class="header-title">ユアコーディング</a>
6      </div>
7        <!-- ハンバーガーボタン -->
8        <div class="burger-btn">
9          <span class="bar bar_top"></span>
10          <span class="bar bar_mid"></span>
11          <span class="bar bar_bottom"></span>
12        </div>
13      <div class="nav-wrapper">
14        <nav class="header-ul">
15          <ul class="inside-header">
16            <li class="ListItems"><a href="#features">特徴</a></li>
17            <li class="ListItems"><a href="#price">価格</a></li>
18            <li class="ListItems"><a href="#contact">お問い合わせ</a></li>
19          </ul>
20        </nav>
21      </div>
22      <div class="inside-header-Btn">
23        <button class="header-Btn"><a href="#contact">お問い合わせ</a></button>
24      </div>
25    </div>
26  </header> 
27<!-- worksArea -->
28  <section class="worksArea">
29    <div class="worksTop">
30      <h2 class="worksTitle">制作実績</h2>
31      <span>WORKS</span>
32    </div>
33    <div class="worksBox slider">
34      <div class="worksBox-1 worksBox-All">
35        <img src="img/work-image1.png" alt="パソコンの写真">
36        <div class="worksBox-Under">
37          <div class="worksInside-p">
38          <p>株式会社サンプル採用サイトのコーディングを行いました。</p>
39          </div>
40          <div class="worksInside-ul">
41            <ul>
42              <li>採用技術：jQuery,Bootstrap4</li>
43              <li>実装期間：2週間</li>
44              <li>担当こーだー：石井</li>
45            </ul>
46          </div>
47        </div>
48      </div> 
49        
50      <div class="worksBox-2 worksBox-All">
51        <img src="img/work-image2.png" alt="デスクの写真">
52        <div class="worksBox-Under CG-H2">
53          <div class="worksInside-p">
54          <p>株式会社サンプル採用サイトのコーディングを行いました。</p>
55          </div>
56          <div class="worksInside-ul">
57            <ul>
58              <li>採用技術：jQuery,Bootstrap4</li>
59              <li>実装期間：2週間</li>
60              <li>担当こーだー：石井</li>
61            </ul>
62          </div>
63        </div>
64      </div> 
65        
66      <div class="worksBox-3 worksBox-All">
67        <img src="img/work-image1.png" alt="パソコンの写真">
68        <div class="worksBox-Under">
69          <div class="worksInside-p">
70          <p>株式会社サンプル採用サイトのコーディングを行いました。</p>
71          </div>
72          <div class="worksInside-ul">
73            <ul>
74              <li>採用技術：jQuery,Bootstrap4</li>
75              <li>実装期間：2週間</li>
76              <li>担当こーだー：石井</li>
77            </ul>
78          </div>
79        </div>
80      </div> 
81        
82      <div class="worksBox-4 worksBox-All">
83        <img src="img/work-image3.png" alt="サンプルの写真">
84        <div class="worksBox-Under CG-H3">
85          <div class="worksInside-p">
86          <p>株式会社サンプル採用サイトのコーディングを行いました。</p>
87          </div>
88          <div class="worksInside-ul">
89            <ul>
90              <li>採用技術：jQuery,Bootstrap4</li>
91              <li>実装期間：2週間</li>
92              <li>担当こーだー：石井</li>
93            </ul>
94          </div>
95        </div>
96      </div> 
97        
98      <div class="worksBox-5 worksBox-All">
99        <img src="img/work-image1.png" alt="パソコンの写真">
100        <div class="worksBox-Under">
101          <div class="worksInside-p">
102          <p>株式会社サンプル採用サイトのコーディングを行いました。</p>
103          </div>
104          <div class="worksInside-ul">
105            <ul>
106              <li>採用技術：jQuery,Bootstrap4</li>
107              <li>実装期間：2週間</li>
108              <li>担当こーだー：石井</li>
109            </ul>
110          </div>
111        </div>
112      </div> 
113        
114    </div>
115  </section>
116

該当のソースコード

scss
1header {
2  background-color: white;
3  box-shadow: 0 3px 10px -5px rgba(0,0,0,0.5);
4  position: fixed;
5  top: 0;
6  left: 0;
7  width: 100%;
8  z-index: 100;
9  .headerBox {
10    max-width: 1022px;
11    margin: 0 auto;
12    padding: 0 4%;
13    height: 94px;
14    display: flex;
15    justify-content: space-between;
16    align-items: center;
17    .title {
18      display: flex;
19      align-items: center;
20      img {
21        width: 47px;
22        object-fit: contain;
23      }
24      .header-title {
25        font-size: 23px;
26        margin-left: 13px;
27        font-weight: bold;
28      }
29      a {
30        color: #202020;
31        text-decoration: none;
32      }
33    }
34    .nav-wrapper {  
35      .header-ul {
36        .inside-header {
37          list-style: none;
38          display: flex;
39          .ListItems {
40            margin-right: 42px;
41            font-weight: bold;
42            a {
43              text-decoration: none;
44              color: #202020;
45            }
46          }
47          .ListItems:last-child {
48            margin-right: 0;
49          }
50        }
51      }
52    }
53    .burger-btn {
54      display: none;
55      width: 39px;      
56      height: 39px;      
57      position: relative;      
58      z-index: 3;
59      border:none;   
60      .bar{      
61        width: 20px;      
62        height: 1px;        
63        display: block;      
64        position: absolute;      
65        left: 50%;      
66        transform: translateX(-50%);      
67        background-color: #101010;    
68      }    
69      .bar_top{   
70        top: 10px;
71      }
72      .bar_mid{    
73        top: 50%;
74        transform: translate(-50%,-50%);
75      }
76      .bar_bottom{
77        bottom: 10px;
78      }
79    }
80    .inside-header-Btn {
81      .header-Btn {
82        padding: 10px 35px;
83        font-weight: bold;
84        border-radius: 10px;
85        background: linear-gradient(90deg, #FA41cc, #6020B0);
86        box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
87        border: none;
88      }
89      a {
90        color: white;
91        text-decoration: none;
92      }
93    }
94  }
95}

レスポンシブ部分

scss
1header {
2    .headerBox {
3      .title {
4        .header-h1 {
5          font-size: 21px;
6        }
7      }
8    }
9    .headerBox {
10      .nav-wrapper {  
11        display: none;      
12        width: 100vw;      
13        height: 100vh;     
14        box-sizing: border-box;
15        position: fixed;      
16        top: 0;      
17        left: 0;       
18        z-index: 2;
19        .header-ul {
20          width: 100%;        
21          height: 100%;        
22          background-color:#c1c1c1;        
23          z-index: 2;      
24          .inside-header {
25            display: block;        
26            position: absolute;        
27            top: 50%;        
28            left: 50%;        
29            transform: translate(-50%,-50%);        
30            text-align: center;  
31            .ListItems {
32              margin-right: 0;        
33              margin-bottom: 40px;
34              a {
35                color: #3a3a3a;
36              } 
37            }
38          }
39        }
40      }
41      .burger-btn {
42        display: block;
43        .bar.barClick-CC {
44          background-color: #3a3a3a;
45        }
46         // burger-btnにclickイベントでcloseを追加した時の編集
47        .close1 {
48          transform: translate(-50%,10px) rotate(45deg);     
49          transition: transform .3s;    
50        }
51        .close2 {      
52        opacity: 0;       
53        transition: opacity .3s;    
54        }   
55        .close3 {      
56          transform: translate(-50%,-8px) rotate(-45deg);      
57          transition: transform .3s;    
58        }
59      }    
60      .inside-header-Btn {
61        display: none;
62      }
63    }
64  }
65}
66.worksArea {
67  margin-bottom: 100px;
68  margin-top: 70px;
69  .worksTop {
70    text-align: center;
71    margin-bottom: 50px;
72    .worksTitle {
73      font-size: 32px;
74      margin-bottom: 10px;
75    }
76    span {
77      color: #47b6d8;
78      font-weight: bold;
79    }
80  }
81  .worksBox {
82    .worksBox-All {
83      margin-bottom: 20px;
84      margin-right: 30px;
85      img {
86        width: 100%;
87        display: block;
88      }
89      .worksBox-Under {
90        height: 199px;
91        border-left: 1px solid #ccc;
92        border-right: 1px solid #ccc;
93        border-bottom: 1px solid #ccc;
94        border-radius:0 0 10px 10px;
95        box-shadow: 1px 1px 15px #ddd;
96        .worksInside-p {
97          padding: 18px;
98          font-weight: 550;
99          font-size: 15px;
100          color: #5a5a5a;
101          line-height: 1.7;
102        }
103        .worksInside-ul {
104          padding: 0 0 30px 20px;
105          font-size: 14px;
106          font-weight: bold;
107          color: #5a5a5a;
108          line-height: 1.7;
109          ul {
110            li {
111              list-style: none;
112            }
113          }
114        }
115      }
116    }
117    .worksBox-2 {
118      .CG-H2 {
119        height: 198.17px;
120      }
121    }
122    .worksBox-4 {
123      .CG-H3 {
124        height: 204.042px;
125      }
126    }
127  }
128}
129

js
1$(function () {
2//worksAreaに対するスライド
3// sliderBox
4  $(".slider").slick({
5    arrows: false,
6    autoplay: true,
7    adaptiveHeight: true,
8    centerMode: true,
9    swipe: true,
10    centerPadding: '8%',
11    slidesToShow: 3,
12    responsive: [
13      {
14        breakpoint: 1023, 
15        settings: {
16          slidesToShow: 3,
17          centerPadding: "1%",
18        },
19      },
20      {
21        breakpoint: 768, 
22        settings: {
23          slidesToShow: 1,
24          centerPadding: "25%",
25        },
26      },
27      {
28        breakpoint: 480, 
29        settings: {
30          slidesToShow: 1,
31          centerPadding: "18%",
32        },
33      },
34    ],
35  });
36
37
38// AOS
39  AOS.init();
40});