يمكنك أيضًا جعل شريط البحث خارج التدفق باستخدام الموضع المطلق.
لن تحتاج إلى margin بعد الآن.
.floating-search-input-wrapper {
position: absolute;
left: 0;
top: calc((4em - 2.6rem - 2px - 2px) / 2); /* ارتفاع الرأس - ارتفاع البحث - الهامش - الحدود */
width: 100%;
}
قد تحتاج إلى إضافة استعلام وسائط للتحكم في العرض على دقة أقل والتأكد من أنه لا يتداخل مع العناصر الأخرى.