ページ内リンクがずれる

タイトルの通りです　ヘッダーのworksのボタンをクリックしてリンク先に飛ぶと表示がずれてしまいます
調べると、ずれるコンテンツにpadding-topとmargin-top（ネガティブマージン）を指定するとよいと聞いたのでしてみたのですが、ずれたままですなぜかbodyのpadding-bottomを消すと正しい場所に飛びます
どうすればずれを直せるかご教授下さい

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>MY PORTFOLIO</title>
6    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  </head>
9  <body>
10    <header class="header">
11      <p class="header-left">My portfolio</p>
12      <ul class="header-right">
13        
14       
15        <li class="header-right-li"><a href="#services">SERVICES</a></li>
16        <li class="header-right-li"><a href="#works">WORKS</a></li>
17      </ul>
18    </header>
19    <section class="top-page">
20      <h2>WELOCME TO <br class="br-futu">MY PORTFOLIO</h2>
21    </section>
22
23    
24
25   
26    <section class="services" id="services">
27      <h2 class="about-h2">SERVICES</h2>
28     <div class="services-wrapper">
29       <div class="service">
30　　　　　<i class="fas fa-laptop-code"></i>
31         <h4>コーディング</h4>
32         <p>お客様から頂いたデザインを元に丁寧にコーディングいたします</p>
33       </div>
34
35       <div class="service">
36　　　　　<i class="fas fa-file-alt"></i>
37         <h4>LP制作</h4>
38         <p>お客様のご要望に適切に沿ったサイトを制作いたします</p>
39       </div>
40     </div>
41    </section>
42
43    <section class="works">
44      <h2 class="about-h2" id="works">WORKS</h2>
45
46    <div class="works-wrapper">
47      <div class="slide slide-wrapper active">
48        <img src="img/kurista_img.png" class="slide-item" >
49        <p class="slide-item">クリ☆スタ コーディング課題の模写</p>
50        <div class="slide-link-wrapper slide-item" >
51            <a href="https://crestadesign.org/cording-first/">元サイト様</a>
52        </div>
53      </div>
54
55        <div class="slide slide-wrapper">
56          <img src="img/isara_img.png" class="slide-item">
57          <p class="slide-item">iSaraの模写</p>
58          <div class="slide-link-wrapper slide-item">
59            <a href="https://isara.life/">元サイト様</a>
60          </div>
61        </div>
62      </div>
63
64      <div class="slide-button-wrapper">
65       <div class="slide-button slide-right">
66         <i class="fas fa-caret-right"></i>
67       </div>
68       <div class="slide-button slide-left">
69         <i class="fas fa-caret-left"></i>
70       </div>
71      </div>
72
73    </section>
74
75
76
77    <script src="js/jquery-3.5.1.min.js"></script>
78    <script src="js/portfolio.js"></script>
79  </body>
80</html>
81
82

CSS
1html {
2  font-size: 62.5%;
3}
4
5a {
6  color: #333;
7  text-decoration: none;
8}
9
10*, *::before, *::after {
11  box-sizing: border-box;
12}
13
14body {
15  font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
16  margin: 0px;
17  background: url(../img/ocean.jpg) no-repeat fixed;
18  background-size: cover;
19  padding-bottom: 30px;
20}
21
22h1, h2, h3, h4, h5, h6 {
23  margin: 0px;
24}
25
26.header {
27  display: flex;
28  justify-content: space-between;
29  height: 70px;
30  width: 100%;
31  background-color: #333;
32  position: fixed;
33  z-index: 5;
34}
35
36.header-left {
37  line-height: 70px;
38  font-size: 1.5rem;
39  color: #fff;
40  margin-left: 20px;
41  font-family: "Redressed";
42  letter-spacing: 1px;
43  cursor: pointer;
44}
45
46.header-right {
47  display: flex;
48}
49
50.header-right-li {
51  text-align: center;
52  list-style-type: none;
53  color: #fff;
54  height: 70px;
55  margin: 0 30px;
56}
57.header-right-li a {
58  font-weight: bold;
59  font-size: 1.2rem;
60  color: #fff;
61  display: block;
62  height: 100%;
63  padding: 0px 2px;
64  line-height: 70px;
65  transition: 0.15s;
66}
67.header-right-li a:hover {
68  background-color: #fff;
69  color: #333;
70}
71
72.top-page {
73  width: 100%;
74  height: 580px;
75  padding: 50px 4% 70px;
76}
77.top-page h2 {
78  color: black;
79  font-family: "Raleway";
80  font-size: 5rem;
81  letter-spacing: 1px;
82  position: absolute;
83  top: 50%;
84  left: 50%;
85  transform: translate(-50%, -50%);
86  line-height: 1.5;
87}
88
89
90.services {
91  text-align: center;
92  width: 80%;
93  margin: 0 auto;
94  margin-bottom: 70px;
95  padding-top: 70px;
96  margin-top: -70px;
97}
98.services h2 {
99  font-size: 3rem;
100  color: #fff;
101  line-height: 2.5;
102  background-color: rgba(0, 0, 0, 0.7);
103  letter-spacing: 1px;
104}
105.services .services-wrapper {
106  display: flex;
107  justify-content: center;
108  background-color: rgba(255, 255, 255, 0.7);
109  padding: 50px 0px;
110}
111.services .service {
112  width: 300px;
113  height: 250px;
114  background-color: #fff;
115  margin: 0 50px;
116  padding: 30px 3% 0;
117  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.7);
118  border-radius: 4px;
119}
120.services .service .fas {
121  font-size: 4rem;
122  display: block;
123  margin-bottom: 30px;
124  color: orange;
125}
126.services .service h4 {
127  font-size: 2rem;
128  margin-bottom: 20px;
129}
130.services .service p {
131  font-size: 1.5rem;
132  font-weight: bold;
133  line-height: 1.5;
134}
135
136.works {
137  text-align: center;
138  width: 80%;
139  color: #fff;
140  margin: 0 auto;
141  position: relative;
142  padding-top: 70px;
143  margin-top: -70px;
144}
145.works h2 {
146  font-size: 3rem;
147  line-height: 2.5;
148  background-color: rgba(0, 0, 0, 0.7);
149  letter-spacing: 1px;
150}
151.works .works-wrapper {
152  background-color: rgba(255, 255, 255, 0.7);
153}
154.works .slide-wrapper img {
155  width: 60%;
156  max-width: 100%;
157  height: auto;
158}
159.works .slide {
160  display: none;
161}
162.works .slide-wrapper p {
163  font-size: 2rem;
164  color: black;
165  letter-spacing: 1px;
166  font-weight: bold;
167}
168.works .slide-wrapper a {
169  font-size: 1.5rem;
170  transition: 0.15s;
171  letter-spacing: 1px;
172}
173.works .slide-wrapper a:hover {
174  background-color: white;
175}
176.works .slide-link-wrapper {
177  display: inline-block;
178}
179.works .active {
180  display: block;
181}
182.works .works-wrapper {
183  padding-top: 50px;
184}
185.works .slide-button-wrapper i {
186  font-size: 5.3rem;
187  color: #172C45;
188}
189.works .slide-right {
190  position: absolute;
191  top: 60%;
192  right: 10%;
193  cursor: pointer;
194}
195.works .slide-left {
196  position: absolute;
197  top: 60%;
198  left: 10%;
199  cursor: pointer;
200}
201.works .slide-item {
202  margin-bottom: 30px;
203}
204
205
206
207

jQuery
1$(function(){
2  $(".slide-left").hide();
3  $(".slide-button").click(function(){
4    $(".active").removeClass("active");
5
6    if($(this).hasClass("slide-right")){
7      $(".slide-wrapper").next().addClass("active");
8      }
9      else{$(".slide-wrapper").prev().addClass("active");}
10　//})
11
12  var slideIndex=$(".slide").index($(".active"));
13
14  $(".slide-button").show();
15
16  if(slideIndex===0){$(".slide-left").hide();}
17  else if(slideIndex===1){$(".slide-right").hide();}
18});
19  
20///////////////////////////////////////////////////
21  $(".header-left").click(function(){
22   $("html,body").animate({"scrollTop":0},"fast");
23 });
24///////////////////////////////////////////////////
25 
26$("#works").click(function(){
27 var works = $(this).attr("href");
28 var works_position = $(works).offset().top();
29 $("html,body").animate({"scrollTop":works_position},"fast");
30});
31/////////////////////////////////////////////////
32$("#services").click(function(){
33 var services = $(this).attr("href");
34 var services_position = $(services).offset().top();
35 $("html,body").animate({"scrollTop":services_position},"fast");
36});
37
38});
39

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

ずれるコンテンツにpadding-topとmargin-top（ネガティブマージン）を指定するとよいと聞いたのでしてみたのですが、ずれたままです

対象を間違えていますね。

css
1.works {
2    text-align: center;
3    width: 80%;
4    color: #fff;
5    margin: 0 auto;
6    position: relative;
7/*    padding-top: 70px; これではないです。
8    margin-top: -70px; */
9}
10#works { /* これです */
11    padding-top: 70px;
12    margin-top: -70px;
13}