ヘッダーのはみ出しを無くしたい

ヘッダーがはみ出してしまいます。
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>

recal

2022/09/23 01:43

ご提示のソースコードでは再現されませんでした。別の要素に問題がある可能性はないですか？

m.ts10806

2022/09/23 01:50

再現するブラウザ、機種など追記を

hatena19

2022/09/23 02:14

body { margin:0; } を追加したらどうなりますか。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する