headerボタンが右端にいかなくなってしまった原因と解決策

前提・実現したいこと

表題の通り、右端にボタンが寄らなくなってしまいました。この解決策を教授いただきたいです

画像も消えてしまいました、こちらの原因が特にわかりません。なぜいきなり消えるのでしょうか？

ご教授いただけると幸いです。

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

試したこと

.header-linkにmagin-left,rightをつけて調整させましたができませんでした。

前回にも質問しましたが、その時は解決しました。いつの間にか、右端に寄らなくなってしまいました。その変化の前後の確認ができず、質問しました。

2.calc()で書いたコードをpxに変更し、小さすぎてしまい、見えないのかなと考えましたが違いました????

該当のソースコード

HTML
1!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>石井花壇|温海温泉旅館【公式サイト】</title>
8    <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。">
9    <link rel="stylesheet" href="./css/destyle.css">
10    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11    <!--flatpicker-->
12    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
13    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
15    <link rel="stylesheet" href="./css/style.css">
16    
17</head>
18<body>
19    <header class="header">
20        <div class="header-left">
21            <img src="./img/top-header-logo.png" alt="" id="logo">
22            <nav class="nav">
23                <ul class="header-list">
24                    <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
25                    <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
26                    <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
27                </ul><!-- /.header-list -->
28            </nav><!-- /.nav -->
29        </div>
30        <div class="header-right">
31            <div class="header-link" id="js-modal">
32                <a class="calender-link js-modal_open" href="#">
33                    <!-- <img src="./img/calender.png" alt="カレンダー"> -->
34                    宿泊予約
35                </a>
36            </div><!-- /.header-link -->
37
38            <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
39                <span class="line"></span ><span class="line"></span><span class="line"></span>
40            </button>
41        </div><!-- /.header-right -->
42       
43
44    humbergerクリック時に表示されるmodalがありますが省略しました
45   
46    </header><!-- /.header -->
47    <script src="js/jquery-3.6.0.min.js"></script>
48    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
49      <!-- 日本語の言語ファイル -->
50      <script>flatpickr("#flatpickr",{locale:"ja"});</script>
51      <script src="js/script.js"></script>
52</body>
53</html>

CSS
1}
2
3.header {
4  position: fixed;
5  top: 0;
6  z-index: 999;
7  width: 100%;
8  max-height: 80px;
9  color: transparent;
10  display: -webkit-box;
11  display: -webkit-flex;
12  display: -ms-flexbox;
13  display: flex;
14  -webkit-box-pack: justify;
15  -webkit-justify-content: space-between;
16      -ms-flex-pack: justify;
17          justify-content: space-between;
18  -webkit-box-align: center;
19  -webkit-align-items: center;
20      -ms-flex-align: center;
21          align-items: center;
22}
23
24.header-left {
25  display: -webkit-box;
26  display: -webkit-flex;
27  display: -ms-flexbox;
28  display: flex;
29  -webkit-box-pack: left;
30  -webkit-justify-content: left;
31      -ms-flex-pack: left;
32          justify-content: left;
33  -webkit-box-align: center;
34  -webkit-align-items: center;
35      -ms-flex-align: center;
36          align-items: center;
37}
38
39.header-left #logo {
40  width: 130px;
41  height: calc(40/80*100%);
42  padding: 20px 120px 20px 20px;
43  z-index: 9999;
44}
45
46.header-left .nav {
47  display: -webkit-box;
48  display: -webkit-flex;
49  display: -ms-flexbox;
50  display: flex;
51  -webkit-box-pack: justify;
52  -webkit-justify-content: space-between;
53      -ms-flex-pack: justify;
54          justify-content: space-between;
55  -webkit-box-align: center;
56  -webkit-align-items: center;
57      -ms-flex-align: center;
58          align-items: center;
59}
60
61.header-left .nav .header-list {
62  display: -webkit-box;
63  display: -webkit-flex;
64  display: -ms-flexbox;
65  display: flex;
66  -webkit-box-align: center;
67  -webkit-align-items: center;
68      -ms-flex-align: center;
69          align-items: center;
70  padding-top: 32px;
71  padding-bottom: 32px;
72}
73
74.header-left .nav .header-list .header-item {
75  color: #fff;
76}
77
78.header-left .nav .header-list .header-item + .header-item {
79  padding-left: 30px;
80}
81
82.header-right .header-link {
83  /*  height: calc(54/80*100%);
84                background-color: $link-color;
85                border-radius: 3px;
86                padding: 15px 35px;
87                display: flex;
88                justify-content: flex-end;
89                align-items: center; */
90  /*   p{
91                    color: #fff;
92                    text-align: center;
93                    } */
94}
95
96@media screen and (max-width: 769px) {
97  .header-right .header-link {
98    margin-left: auto;
99  }
100}
101
102.header-right .header-link .calender-link {
103  display: block;
104  background-color: #978F10;
105  text-decoration: none;
106  font-weight: bold;
107  -webkit-box-align: center;
108  -webkit-align-items: center;
109      -ms-flex-align: center;
110          align-items: center;
111  text-align: center;
112  color: #fff;
113  padding: 10px 37px;
114  font-size: 1.6rem;
115  -webkit-transition: .3s;
116  transition: .3s;
117}
118
119@media screen and (max-width: 992px) {
120  .header-right .header-link .calender-link {
121    margin-right: 180px;
122  }
123}
124
125.header-right .header-link .calender-link::before {
126  content: "";
127  display: inline-block;
128  margin: -3px 5px 0 0;
129  background: url(../../img/calender.png) no-repeat;
130  background-size: contain;
131  vertical-align: middle;
132  width: 22px;
133  height: 22px;
134}
135
136.header-right .header-link .calender-link:hover {
137  background-color: #000;
138}
139
140.form {
141  display: none;
142}
143
144@media screen and (max-width: 769px) {
145  .form {
146    display: block;
147    width: calc(550px/1920px*100%);
148    height: calc(600px/1080px*100%);
149    background-color: #fff;
150    position: absolute;
151    top: 50%;
152    left: 50%;
153    margin-top: 50vh;
154    border: 1px solid #707070;
155    -webkit-transform: translate(-50%, -50%);
156            transform: translate(-50%, -50%);
157    z-index: 100;
158  }
159}
160
161@media screen and (max-width: 769px) {
162  .form_img {
163    width: 18px;
164    height: 18px;
165  }
166}
167
168@media screen and (max-width: 992px) {
169  .button {
170    display: block;
171    height: 80px;
172    width: 80px;
173    position: fixed;
174    top: 0%;
175    right: 20px;
176    /* /*   position: fixed;
177        right: 20px;
178        z-index: 3; */
179    /*  width: 5%;
180        height: 5%; */
181    /* border: 1px solid #333;
182        box-shadow: 0 0 2rem transparent; */
183    z-index: 99;
184  }
185  .button._open {
186    right: 20px;
187  }
188}
189
190@media screen and (max-width: 992px) and (max-width: 992px) {
191  .button .line {
192    display: block;
193    height: 1px;
194    width: 60%;
195    background-color: #fff;
196    position: absolute;
197    top: 50%;
198    left: 50%;
199    -webkit-transform: translate(-50%, -50%);
200            transform: translate(-50%, -50%);
201    -webkit-transition: .3s;
202    transition: .3s;
203  }
204  .button .line:first-child {
205    display: block;
206    -webkit-transform: translate(-50%, -15px);
207            transform: translate(-50%, -15px);
208  }
209  .button .line:nth-child(2) {
210    /*  top: 0;
211                    bottom: 0;
212                    margin: auto; */
213  }
214  .button .line:last-child {
215    -webkit-transform: translate(-50%, 15px);
216            transform: translate(-50%, 15px);
217  }
218  .button .line._open:first-child {
219    display: block;
220    -webkit-transform: rotate(45deg) translate(-50%, -15px);
221            transform: rotate(45deg) translate(-50%, -15px);
222    -webkit-transform-origin: left;
223            transform-origin: left;
224    color: #000;
225  }
226  .button .line._open:nth-child(2)._open {
227    opacity: 0;
228  }
229  .button .line._open:last-child {
230    -webkit-transform: rotate(-45deg) translate(-50%, 15px);
231            transform: rotate(-45deg) translate(-50%, 15px);
232    -webkit-transform-origin: left;
233            transform-origin: left;
234    color: #000;
235  }
236}