要素が重なってしまう（div,Flexbox,inline-block)

前提・実現したいこと

ヘッダー部の左側にタイトルロゴ、右側にユーザー名、ページリンク、検索窓を配置
これらの配置はflexでspacebetweenと使用しています。
↑は意図する表示になっているのですが、右側をdiv要素で囲い、さらにネストして囲って分けているのですが、右側の要素が重なってしまいます。
検索窓とそれ以外をそれぞれdivで囲って（子要素）、それをさらにdivで囲い（親要素）、親要素をFlexにすれば良いのか、Flexにしなくても子要素をそれぞれinline-blockにすれば良いのだろうと思っていたのですが、上手くいきません。
親要素、子要素の関係からわかりやすく説明していただけると助かります。

※検索窓はCSSでデザインされたものをコピペで拾ってきているものです。

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

要素同士が重なる

該当のソースコード

index.html
1<div class="header_wrapper">
2  <div class="title">
3    <h1>タイトル.</h1>
4  </div>
5  <div class="header_right">
6    <div class="search_form">
7      <form id="form4" action="" method="get">
8        <input id="sbox4"  id="s" name="search" type="text" placeholder="例)" />
9        <button id="sbtn4" type="submit"><i class="fas fa-search"></i></button>
10      </form>
11    </div>
12    <div class="user_info_wrapper">
13        <p>こんにちわ<u> {{username}} </u>さん</p>
14        <a href="{{constant('gift\Bootstrap::ENTRY_URL')}}mypage.php">マイページ</a>
15        <a href="{{constant('gift\Bootstrap::ENTRY_URL')}}logout.php">ログアウト</a>
16    </div>
17  </div>
18</div>
19

index.css
1.header_wrapper {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5  height: 200px;
6  margin-bottom: 0px;
7}
8
9/* タイトルロゴ */
10.title {
11  display: block;
12  font-size: 78px;
13  letter-spacing: 4px;
14  font-style: bold;
15  font-family: 'Righteous', cursive;
16  margin-left: 4px;
17}
18
19.header_right {
20  display: flex;
21  width: 30%;
22  /* justify-content: center;
23  align-items: center; */
24}
25/* 検索窓 */
26.search_form {
27  display: block;
28}
29#form4{
30  position:relative;
31  max-width:300px;	
32  margin-bottom:20px;
33  }
34  #sbox4{
35  height:50px;
36  padding:0 10px; 
37  position:absolute; 
38  left:0;
39  top:0; 
40  border-radius:25px;
41  outline:0;
42  background:#eee;
43  }
44  #sbtn4{
45  height:50px;
46  width:50px;	
47  position:absolute; 
48  left:250px; 
49  top:0;
50  background:#7fbfff;
51  color:#fff;
52  border:none;
53  border-radius:0 25px 25px 0;
54  }
55  #sbtn4 .fa-search{
56  font-size:20px;	
57  position:absolute;
58  top:30%;
59  left:30%;	
60  }
61  #sbtn4:hover{
62  color:#888;
63  }
64
65/* ユーザー名 */
66.header_wrapper .user_info_wrapper {
67  display: block;
68}
69
70.header_wrapper .user_info_wrapper p {
71  margin-bottom: 6px;
72}