ریسپانسیو سایت

سعی کنید از یک فریمورک css مثه بوتسرپ استفاده کنید تا هم زودتر پروژه تون رو تمام کنید هم دقیق باشه.
الان چون من کدهای شما رو ندیدم ولی حدس میزنم با flexbox کار نکردین .

خب شما از width استفاده کردید و فقط دیوایس هایی که دقیقا همون width رو دارن اون تغییرات روشون اعمال میشه
باید از min-width و max-width استفاده کنید ، به صورت ساده اگر بخوام بگم

max-width: 768px دیوایس هایی که از 768px کوچکتر هستند رو پوشش میده
min-width:768px دیوایس هایی که از 768px بزرگتر هستند رو پوشش میده

یک) کدهاتون رو قرار بدین.
دو) از max-width استفاده کنید.
سه) استفاده از دستورات @media نباید مشکلی رو در پیاده سازی واکنشگرایی سایت به دنبال داشته باشه و شیوه کلی شما درست هستش، مطمئنا ایراد در کدها هستش. کدهارو قرار بدین.

تو رسپانسیو کردن کدهاتونو بهتره تو مرورگر فایرفاکس تست کنید. من خودم امتحان کردم گاهی کروم نتیجه درستی نمی‌ده.
از از min-width و max-width استفاده کنید.
اگه زیاد رسپانسیو کار نکردین بهتره چند نمونه رسپانسیو رو بررسی کنید، بهتون کمک می‌کنه.
کدهاتونو بذارین دوستان بهتر کمک می‌کنن.

ببینید شما وقتی نوشتین عرض 414 خوب معلومه دیگه باید حتما با گوشی تست کنید که عرضش همین عدد باشه دقیقا ولی اگه اگه مکس استفاده کنید مشکلتون حل میشه