下層ページ作成中にヘッダーのボタンとテキストがが重なり左にずれてきてしまいました。
ヘッダー以下のコードを全て消してみたり、position指定してみたりしましたが直りません。
何が原因なのかをどなたか教えて頂きたいです。
<div class="header-r"> <nav> <ul> <li><a class="book-button" href="book.html">宿泊予約</a></li> <li><a class="contact-button" href="contact.html">お問い合わせ</a></li> </ul> </nav> </div> <p class="nav-text">ご予約・お問い合わせ<br>092-000-0000<br>(受付時間 9:00~22:00)</p>
.header { width: 100%; background-color: #fff; top: 0; display: flex; align-items: center; } .logo { width: 256px; } .header-list { display: flex; } .main-nav .nav-item { margin: 0 10px; } .main-nav .nav-item a { width: 100%; line-height: 30px; height: 30px; color: #333; font-size: 1.5rem; letter-spacing: 1px; transition: 0.4s; } .nav-item a { position: relative; text-decoration: none; } .nav-item a::after { position: absolute; bottom: -1px; left: 0; content: ''; width: 100%; height: 2px; background: #d0b879; color: #fff; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; } .nav-item a:hover::after { transform-origin: left top; transform: scale(1, 1); } .main-nav .nav-item.active a, .main-nav .nav-item a:hover { background-color: #fff; color: #d0b879; } .header-r { text-decoration: none; } .book-button { font-size: 1.5rem; background: #d0b879; color: #fff; padding: 16px 36px; margin-left: 80px; margin-right: 2px; } .contact-button { font-size: 1.5rem; background: rgb(90, 90, 90); color: #fff; padding: 16px 26px; margin-right: 60px; } .book-button:hover, .contact-button:hover { background: rgb(24, 23, 23); transition: 0.6s; } .nav-text { font-size: 1.6rem; color: #d0b879; text-align: center; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/29 20:02