عرض مناسب در صفحه نمایش ها

این لینک رو ببین

همچنین این کدم به css اضافه کن

* {
box-sizing: border-box !important;
} 

برای حالت رسپانسیو معمولا از درصد استفاده میشه مثلا 50 درصد 50 درصد صفحه رو میپوشونه

درود
از @media باید استفاده کنید دیگه . همزمان در تمامی breakpoint ها میاین و width عنصر container رو مناسب با width صفحه کم میکنید تا بیرون نزنه .
از overflow:hidden; هم میشه استفاده کرد ولی من اولی رو پیشنهاد میدم .
موفق باشید .ُ

سلام دوست عزیز
ببینید شما میاید یه عرض به container میدید برای دسکتاپ اما عرض گوشی خیلی کوچیک تر هست نسبت به مانیتور واسه همین عناصر نمیدونن چجوری خودشون رو توی اون صفحه کوچیک جا بدن پس بهم میریزن اما تو باید بهش یاد بدی که اگه عرض صفحه از یه اندازه ای کوچیک تر شد تو بیا عرضت مثلا بشه واسه مثال از 1900 بشه 200 و این فلان تگ عرضش تغییر بکنه که توی صفحه جا بشه این کاررو میتونید با مدیا کوری ها انجام بدید باید برید یکم آموزشش رو ببینید اینجوری نیست که بگی با یکی دو خط کد میشه کل عناصر رو تنظیم ن برای هر قسمت که موقعه کوچیک شدن صفحه بهم میریزه باید یک مدیا کوری تعریف کنی و حالا جاشو عوض کنی کوچیک ترش کنی و ... معمولا از فریم ورک boostrap برای Responsive استفاده میکنن حالا اوناییم که نمیخوان از کلاس های آماده بوت استرپ استفاده کنن و خودشون بنویسن باید برن دوره های responsive برای css رو ببینن چیز سختی نیست خیلی اسونه شاید تو چن ساعت یا یکی دو روز یاد بگیری باید ویدیو ببینی