لماذا خاصية max-width لا تقوم بعملها ؟

مرحباً @مصطفى اوريك

سأوضح لك سبب ذلك ثم كيفية إصلاحه , عند إستخدام الخاصية 

max-width

فأنها تقوم بمنع العنصر أو حاوية العنصر من زيادة حجمها عن القيمة المخصصة من خلال الخاصية 

width

أي عندما تقوم بذلك فانك تقول إذا قيمة width زادت عن قيمة max-width قم بخفضها إلى قيمة ال max-width  وإذا ال width أقل من ال max-width فقم بجعله متناسب مع قيمة width , الأن المشكلة لديك ,هي لديك العنصر الذي يحمل الكلاس search-section في سطر رقم 7 في ملف ال css في العنصر section سطر رقم 1 في ملف ال html وهو الحاوية الرئيسية لجميع العناصر التي تريدها أو التي تقع تحتها الكلاس input-content   يحوي الخاصية display: flex قم بإزالتها 

display: flex;

لأن flex تقوم بعرض العناصر كأعمدة أو صفوف ,حتى يتغير حجم ال input أو العنصر ذو الكلاس المرغوبة  قم بإزالتها .الشكل النهائي يصبح هكذا 

.search-section {
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #B6D6D6;
}

بعد ذلك ستصبح العناصر متناسبة مع الأحجام الأخرى .