cssでhoverの範囲を横幅いっぱいにしたいです。

Question

前提・実現したいこと

初めて質問させていただきます。
htmlとcssでヘッダーの作成をしているのですが、header2という大枠の中に4つの要素を入れ込み、うまく調整しようとしていたのですが、最後の4つ目の要素のところで検索マークのアイコンと文字が横並びになっているので、そこの中でもdivでくくったのですが、その時にhoverの効く範囲が右端まで到達しませ。そこで右端いっぱいにhoverが効くように実現したいと考えています。

発生している問題・エラーメッセージ

html
<div class="header2">
                <div class="header2_1">
                    <div class="header2_line1">
                        <a href="#">ロケーション<br><span>行き先はどちらですか？</span></a>
                    </div>
                </div>
                <div class="header2_2">
                    <div class="header2_line2">
                        <a href="#">チェックイン<br><span>日時を入力</span></a>
                    </div>
                </div>
                <div class="header2_3">
                    <div class="header2_line3">
                        <a href="#">チェックアウト<br><span>日時を入力</span></a>
                    </div>
                </div>
                <div class="header2_4">
                    <div class="header2_4_con">
                        <a href="#">人数<br><span>ゲスト数を入力</span><i class="fas fa-search"></i></a>  
                    </div>
                </div>
            </div>

該当のソースコード

.header2{
    background-color: #fff;
    width: 850px;
    margin: 40px auto 0 auto;
    border-radius: 32px;
    height: 65px;
    display: flex;
}
.header2 a{
    color: black;
    display: block;
    font-size: 12px;
    font-weight: bolder;
    border-radius: 32px;
}
.header2 div p{
    color: #e8e8e8;
    font-weight: bolder;
}
.header2 span{
    font-size: 14px;
    color: #717171;
    font-weight: lighter;
}
.header2_1 a{
    padding: 14px 80px 14px 32px;
}
.header2_2 a{
    padding: 14px 70px 14px 32px;
}
.header2_3 a{
    padding: 14px 60px 14px 32px;
}
.header2_4 a{
    padding: 14px 91px 14px 32px;
}
.header2_line1{
    height: 32px;
    position: relative;
}
.header2_line1::after{
    content: "";
    border-right: 1px solid #ddd;
    height: 32px;
    margin-top: 14px;
    position: absolute;
    top: 0;
    right: 0;
}
.header2_line2{
    height: 32px;
    position: relative;
}
.header2_line2::after{
    content: "";
    border-right: 1px solid #ddd;
    height: 32px;
    margin-top: 14px;
    position: absolute;
    top: 0;
    right: 0;
}
.header2_line3{
    height: 32px;
    position: relative;
}
.header2_line3::after{
    content: "";
    border-right: 1px solid #ddd;
    height: 32px;
    margin-top: 14px;
    position: absolute;
    top: 0;
    right: 0;
}
.header2_4_con{
    display: flex;
    position: relative;
    align-items: center;
    padding-right: 10px;
}
.header2_4 i{
    color: white;
    padding: 15px;
    font-size: 18px;
    background-color: #FF385D;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}
.header2 a:hover{
    background-color: #ddd;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[itagagaki]

問題が再現しないというか、どうなることが期待されていて、現実がどうなるのかがわかりません。
詳しくお願いします。

[yambejp]

手書きでいいので期待される結果を図示して画像で貼り付けてください

[ken___]

画像を添付しましたがiタグの検索ボタンまでしかhoverの範囲が伸びず、右端いっぱいまで広がりません。最終的には画像で見えている、白色でhoverが効いていない範囲までhoverを伸ばしたいです。

Answer 1

なんだか難しいコードですけど、こんな感じでしょうか。

.header2_4 a{
    padding: 14px 91px 14px 32px;
}
.header2_4_con{
    padding-right: 10px;
}

.header2_4 a{
    padding: 14px 104px 14px 32px;
}
.header2_4_con{
    padding-right: 0;
}

Comments

[ken___]

解決しました！
ありがとうございました。