hoverとpaddingの制御について

お世話になっております。

今Progateの模写コーディングのヘッダー部分を着手しているのですが、下記のURLのヘッダーのようにhover時にボタンの背景色が変わる部分がどうも上手くいきません。

まず、listで作っているのでheader-navの間隔を開けるのにpadding-rightを使用しました。
その後hover時に背景が広がるようにまた、padding-rightを使用しました。
そうするとhover時にpaddingの幅分横に広がってしまいました。

理想はお手本のようにその場で背景色のみ広がって欲しいのですが、どうしたらいいでしょうか？
デベロッパーを見てもよくわかりませんでした。。。
拙い文章で申し訳ありません。よろしくお願いいたします。

  display: flex;
  justify-content: space-between;
  align-items:center;
  padding-top: 25px;
}


.header-logo{
  width: 112px;
  height: 29px;
  padding-left: 30px;
  
}

header .header-nav{
  display: flex;
  align-items: center;
}


.header-nav li{
  margin-right: 45px;
  position: relative;
}

.header-nav li ul{
  position: absolute;
  top: 30px;
  height: 0;
}

.header-nav li li{
  width: 80px;
  display: block;
  background-color: rgb(240, 244, 249);
  border: #ccc solid 0.5px;
  padding: 20px 45px 20px 20px;
  margin: 0;
  
}

.header-nav li:nth-of-type(3n){
  margin-right: 25px;
}

.header-nav li:nth-of-type(4n){
  margin-right: 30px;
}

.header-nav .member a{
  display:block;
  padding: 15px 18px ;
  border-radius: 5px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  background-color: rgb(48, 200, 214);
  font-family: AvenirNext, Lato, "Hirago KakuGothic ProN", Meiryo, sans-serif;
  font-size: 0.75rem;
}

.header-nav a{
  font-size: 14px;
  color: #2b546a;
}

.fas{
  padding-left: 3px;
}

.header-nav a:hover{
  padding: 15px 18px;
  background: #f0f5fd;
  color: #2b546a;
  border-radius: 5px;
  transition: 0.5s;
}

m.ts10806

2022/04/16 10:45

>hoberとタイトルが誤字です（質問本文は合ってます）

cae_03

2022/04/16 10:47

ありがとうございます

smoon

2022/04/16 11:48

考え方がちょっと違っていて、hover時に広がっているのではなく、 hover時に色がついているだけです。

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

回答2件

ベストアンサー

htmlも載せてくれないと確認しづらいですね

自分ならこうやってるくります。
言語の部分は面倒だったのでドロップダウンは作ってません

html
1<header class="header">
2    <div class="header__logo"><img src="./typo_logo-b40bf595603dc0e63a5c..svg" alt="progateのロゴ"></div>
3    <nav class="header__nav">
4      <ul class="header__nav-list">
5        <li class="header__nav-item"><a href="#">法人プラン</a></li>
6        <li class="header__nav-item"><a href="#">言語</a></li>
7        <li class="header__nav-item"><a href="#">ログイン</a></li>
8        <li class="header__nav-item"><a href="#">無料会員登録</a></li>
9      </ul>
10    </nav>
11  </header>

css
1/* reset---------------------------------- */
2
3body {
4  background-color: #F8FBFE;
5  font-size: 16px;
6}
7
8img {
9  width: 100%;
10  height: auto;
11}
12
13a {
14  text-decoration: none;
15  display: inline-block;
16  transition: .3s;
17}
18
19ul {
20  list-style: none;
21  list-style-type: none;
22}
23
24
25/* style------------------------------------ */
26.header {
27  padding: 10px 20px 0;
28  height: 40px;
29  display: flex;
30  align-items: center;
31}
32
33.header__logo {
34  width: 115px;
35  height: 20px;
36  cursor: pointer;
37}
38
39.header__nav {
40  margin-left: auto;
41}
42
43.header__nav-list {
44  display: flex;
45}
46
47.header__nav-item:not(:first-child) {
48  margin-left: 40px;
49}
50
51.header__nav-item a {
52  color: #333;
53  font-size: 14px;
54  padding: 0 16px;
55  display: inline-block;
56  line-height: 40px;
57  border-radius: 5px;
58}
59
60.header__nav-item:nth-of-type(4) a {
61  color: #fff;
62  background-color: #30C8D5;
63  font-weight: bold;
64}
65
66.header__nav-item:nth-of-type(4) a:hover {
67  background-color: rgb(35, 164, 176);
68}
69
70.header__nav-item:not(:nth-of-type(4)) a:hover {
71  background: #f0f5fd;
72}