padding-top指定での疑問

worksへのpaddin-top指定時、works h2が下に押し出され、ボックスの上に余白ができてしまいます
servicesへのpadiing-top指定の時はそのようなことが起こらないのですが.....
works h2 をservices h2のようにボックスの上にくっつけたままpadding-topを指定するにはどうすればよいのでしょうか
![]

ネガティブマージン等を使ってみたり、このサイトで調べてみたりしましたが目ぼしい情報が見当たらず、、、
htmlの構造は似通っていると思うのですが、、、、

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    
8    <section class="services" id="services">
9      <h2 class="about-h2">SERVICES</h2>
10     <div class="services-wrapper">
11       <div class="service">
12　　　　　<i class="fas fa-laptop-code"></i>
13         <h4>コーディング</h4>
14         <p>お客様から頂いたデザインを元に丁寧にコーディングいたします</p>
15       </div>
16
17       <div class="service">
18　　　　　<i class="fas fa-file-alt"></i>
19         <h4>LP制作</h4>
20         <p>お客様のご要望に適切に沿ったサイトを制作いたします</p>
21       </div>
22     </div>
23    </section>
24
25    <section class="works">
26      <h2 class="about-h2" id="works">WORKS</h2>
27
28    <div class="works-wrapper">
29      <div class="slide slide-wrapper active">
30        <img src="img/kurista_img.png" class="slide-item" >
31        <p class="slide-item">クリ☆スタ コーディング課題の模写</p>
32        <div class="slide-link-wrapper slide-item" >
33            <a href="https://crestadesign.org/cording-first/">元サイト様</a>
34        </div>
35      </div>
36
37        <div class="slide slide-wrapper">
38          <img src="img/isara_img.png" class="slide-item">
39          <p class="slide-item">iSaraの模写</p>
40          <div class="slide-link-wrapper slide-item">
41            <a href="https://isara.life/">元サイト様</a>
42          </div>
43        </div>
44      </div>
45
46      <div class="slide-button-wrapper">
47       <div class="slide-button slide-right">
48         <i class="fas fa-caret-right"></i>
49       </div>
50       <div class="slide-button slide-left">
51         <i class="fas fa-caret-left"></i>
52       </div>
53      </div>
54
55    </section>
56
57
58
59    <script src="js/jquery-3.5.1.min.js"></script>
60    <script src="js/portfolio.js"></script>
61  </body>
62</html>
63

CSS
1.services {
2  text-align: center;
3  width: 80%;
4  margin: 0 auto;
5  margin-bottom: 70px;
6  padding-top: 70px;
7  margin-top: -70px;
8}
9.services h2 {
10  font-size: 3rem;
11  color: #fff;
12  line-height: 2.5;
13  background-color: rgba(0, 0, 0, 0.7);
14  letter-spacing: 1px;
15}
16.services .services-wrapper {
17  display: flex;
18  justify-content: center;
19  background-color: rgba(255, 255, 255, 0.7);
20  padding: 50px 0px;
21}
22.services .service {
23  width: 300px;
24  height: 250px;
25  background-color: #fff;
26  margin: 0 50px;
27  padding: 30px 3% 0;
28  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.7);
29  border-radius: 4px;
30}
31.services .service .fas {
32  font-size: 4rem;
33  display: block;
34  margin-bottom: 30px;
35  color: orange;
36}
37.services .service h4 {
38  font-size: 2rem;
39  margin-bottom: 20px;
40}
41.services .service p {
42  font-size: 1.5rem;
43  font-weight: bold;
44  line-height: 1.5;
45}
46
47.works {
48  text-align: center;
49  width: 80%;
50  color: #fff;
51  margin: 0 auto;
52  padding-top: 70px;
53  margin-bottom: 70px;
54  background-color: rgba(255, 255, 255, 0.7);
55  position: relative;
56}
57.works h2 {
58  font-size: 3rem;
59  line-height: 2.5;
60  background-color: rgba(0, 0, 0, 0.7);
61  letter-spacing: 1px;
62}
63.works .slide-wrapper img {
64  width: 60%;
65  max-width: 100%;
66  height: auto;
67}
68.works .slide {
69  display: none;
70}
71.works .slide-wrapper p {
72  font-size: 2rem;
73  color: black;
74  letter-spacing: 1px;
75  font-weight: bold;
76}
77.works .slide-wrapper a {
78  font-size: 1.5rem;
79  transition: 0.15s;
80  letter-spacing: 1px;
81}
82.works .slide-wrapper a:hover {
83  background-color: white;
84}
85.works .slide-link-wrapper {
86  display: inline-block;
87}
88.works .active {
89  display: block;
90}
91.works .works-wrapper {
92  padding-top: 50px;
93}
94.works .slide-button-wrapper i {
95  font-size: 5.3rem;
96  color: #172C45;
97}
98.works .slide-right {
99  position: absolute;
100  top: 60%;
101  right: 10%;
102  cursor: pointer;
103}
104.works .slide-left {
105  position: absolute;
106  top: 60%;
107  left: 10%;
108  cursor: pointer;
109}
110.works .slide-item {
111  margin-bottom: 30px;
112}
113
114@media (max-width: 700px) {
115  .br-futu {
116    display: none;
117  }
118
119  .top-page {
120    height: 450px;
121  }
122  .top-page h2 {
123    font-size: 3rem;
124    line-height: 1.2;
125  }
126
127  .about {
128    margin: 0 auto;
129    margin-bottom: 70px;
130    padding-bottom: 0px;
131  }
132  .about h2 {
133    font-size: 3rem;
134    line-height: 2.5;
135    background-color: rgba(0, 0, 0, 0.7);
136  }
137  .about p {
138    font-size: 2rem;
139    line-height: 2;
140  }
141
142  .about-p {
143    background-color: rgba(255, 255, 255, 0.7);
144    padding: 6%;
145  }
146
147  .skills h2 {
148    font-size: 3rem;
149    margin-bottom: 20px;
150    color: #fff;
151    letter-spacing: 1px;
152    background-color: #172C45;
153    line-height: 1.5;
154  }
155
156  .skills-wrapper {
157    display: flex;
158    flex-direction: column;
159    align-items: center;
160  }
161
162  .skills-p-1 {
163    color: #fff;
164    font-size: 1.8rem;
165    margin-bottom: 80px;
166    letter-spacing: 1px;
167  }
168
169  .skill-icon {
170    display: inline-block;
171    margin: 30px 0px;
172    width: 200px;
173  }
174
175  .skill-icon-name {
176    color: #fff;
177    font-size: 2rem;
178    letter-spacing: 1px;
179    margin-bottom: 15px;
180    font-family: "Raleway";
181    font-weight: bold;
182  }
183
184  .skill-img {
185    height: 120px;
186  }
187
188  .skill-icon:nth-of-type(2) img {
189    height: 150px;
190  }
191
192  .skill-icon:nth-of-type(2) {
193    position: relative;
194    top: -17px;
195  }
196
197  .skill-margin {
198    margin-bottom: 10px;
199  }
200
201  .skill-setumei {
202    color: #fff;
203    font-size: 1.5rem;
204    line-height: 1.5;
205  }
206
207  .services .services-wrapper {
208    display: flex;
209    justify-content: center;
210    flex-direction: column;
211    align-items: center;
212    background-color: rgba(255, 255, 255, 0.7);
213    padding: 20px 0px;
214  }
215  .services .service {
216    margin: 50px 0px;
217    width: 80%;
218  }
219
220  .works .slide-wrapper img {
221    width: 70%;
222    max-width: 100%;
223    height: auto;
224  }
225  .works .slide-wrapper p {
226    font-size: 1.5rem;
227    color: black;
228    letter-spacing: 1px;
229    font-weight: bold;
230  }
231  .works .slide-wrapper a {
232    font-size: 1.5rem;
233    transition: 0.15s;
234    letter-spacing: 1px;
235  }
236  .works .slide-wrapper a:hover {
237    background-color: white;
238  }
239  .works .slide-link-wrapper {
240    display: inline-block;
241  }
242  .works .active {
243    display: block;
244  }
245  .works .works-wrapper {
246    padding-top: 50px;
247  }
248  .works .slide-button-wrapper i {
249    font-size: 4.3rem;
250    color: #172C45;
251  }
252  .works .slide-right {
253    position: absolute;
254    top: 60%;
255    right: 5%;
256    cursor: pointer;
257  }
258  .works .slide-left {
259    position: absolute;
260    top: 60%;
261    left: 5%;
262    cursor: pointer;
263  }
264}