ご提示のソースコードでは再現されませんでした。
別の要素に問題がある可能性はないですか？
ヘッダーがはみ出してしまいます。
over-flow:hiddenやbox-sizing:border-boxを指定しても上手くいきませんでした。
ある一定幅の横幅の時にのみはみ出してしまいます。ヘッダーにwidth:100%をつけているので親要素に対してマックスの大きさで他の要素は指定できたのですが、ヘッダーだけがはみ出て困っていいます。
<body> <header> <picture class="header-logo"> <div role="img" aria-label="ロゴ"> <img src="img/logo.svg" alt=""> </div> </picture> <a href="#"> <div class="header-button-none"> <div class="header-button"> <p>無料カウンセリングを受ける</p> </div> </div> </a> </header> </body> <style> header { box-sizing: border-box; display: flex; justify-content: space-between; z-index: 99; position: fixed; height: 60px; width: 100%; } .fixed { background-color: #fff; opacity: 1; transition: 1s ease-out; } /* header */ .header-logo { display: flex; align-items: center; padding-left: 20px; } .header-logo img { width: 96.7px; height: 23px; } header a { display: block; display: flex; justify-content: center; align-items: center; border-radius: 50px; } .header-button { background-color: #eb51c2; width: 186px; padding: 15px 20px; border-radius: 50px; color: #fff; } .header-button p { font-size: 14px; font-weight: bold; } .header-button-none { opacity: 0; transition: 1s ease-out; } header > a { text-decoration: none; color: inherit; } </style>
再現するブラウザ、機種など追記を
body {
margin:0;
}
を追加したらどうなりますか。
まだ回答がついていません
会員登録して回答してみよう
