Q&A
御覧の通り、マークダウンのcodeの中では他のマークダウン使えませんので、外に出してください。
> 
あとCSSが半端な状態で提示されてませんか？
前提・実現したいこと
表題の通り、右端にボタンが寄らなくなってしまいました。この解決策を教授いただきたいです
画像も消えてしまいました、こちらの原因が特にわかりません。なぜいきなり消えるのでしょうか？
ご教授いただけると幸いです。
発生している問題・エラーメッセージ
試したこと
.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}
補足情報（FW/ツールのバージョンなど）
自己解決
