ヘッダー領域にボタンを追加する方法

開発
14

フローの外に検索バーを配置するには、絶対位置指定を使用することもできます。
margin は不要になります。

.floating-search-input-wrapper {
   position: absolute;
   left: 0;
   top: calc((4em - 2.6rem - 2px - 2px) / 2);  /* ヘッダーの高さ - 検索の高さ - マージン - ボーダー */
   width: 100%;
}

低い解像度で幅を制御し、他の要素と重ならないようにするために、メディアクエリを追加する必要がある場合があります。