一部の要素のみをスクロール

前提・実現したいこと

現在ポートフォリオサイトを作成しています。その中で、一部の要素のみを横スクロールできるようにしたいと考えています。

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

適用したい部分(work1,work2)だけでなく、全体が横スクロールされてしまいます。

該当のソースコード

html
1<body>
2 <div id="main">
3    <div class="works">
4      <div class="work1">
5         <div class="left-box">
6           <h2>AAAAAAAA</h2>
7           <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
8           <h3>BBBB</h3>
9           <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
10           <h3>CCCCCCC</h3>
11           <p>cccccccccccccccccccccccccccccccccccccccccc</p>
12         </div>
13         <div class="right-box">
14           <img src="image1">
15           <img src="image2">
16           <img src="image3">
17         </div>
18      </div>
19      <div class="work2">
20        <div class="left-box">
21          <h2>AAAAAAAA</h2>
22          <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
23          <h3>BBBB</h3>
24          <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
25          <h3>CCCCCCC</h3>
26          <p>cccccccccccccccccccccccccccccccccccccccccc</p>
27        </div>
28        <div class="right-box">
29          <img src="image1">
30          <img src="image2">
31          <img src="image3">
32        </div>
33      </div>
34    </div>
35 </div>
36</body>

css
1body{
2  padding: 0;
3  margin: 0;
4  font-family: Verdana, Geneva, Tahoma, sans-serif;
5  overflow-x: hidden;
6}
7
8#main{
9  width: 100%;
10  height: 100%;
11  position: absolute;
12  top: 0;
13  left: 0;
14  z-index: 1;
15  box-sizing: border-box;
16}
17.work1{
18  width: 150%;
19  background-color:#87CEEB	;
20  color: #fff;
21  display: flex;
22  align-items: center;
23  overflow: auto;
24}
25.work2{
26  width: 100%;
27  background-color:#FDF5E6;
28  display: flex;
29  align-items: center;
30}
31
32.left-box{
33  width: 300px;
34  padding: 0 0 10px 10px;
35}
36.right-box{
37  white-space: nowrap;
38}
39img{
40  height: 450x;
41  width: 450px;
42  padding:50px 20px 50px 20px ; 
43}