لماذا تظهر المساحة الفارغة عند إختبار تجاوب التصميم

وعليكم السلام ورحمة الله وبركاته.

المشكلة لديك في هذا العنصر :

لاحظ كيف أنك تستخدم :

margin-right: 50% !important;
transform: translateX(25%);

ولهذا فإنه يتم إزاحته كثيرا جهة اليسار مما يسبب تلك المسافة الزائدة.

ويفضل لجعل العنصر في المنتصف إستخدام flexbox كالتالي .

في ملف src\sass\index.scss سطر 389 يرجى إستبدال التنسيقات بالتالي :

.center-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

أو إذا أردت إستخدام التنسيقات التي لديك يمكنك وضع خاصية overflow hidden للعنصر curve-contain كالتالي :

.curve-contain{
  overflow: hidden;
}

المشكلة في العنصر الذي يحمل الكلاس center-div text-center يستحوذ على مساحة أكبر من باقي العناصر ويظهر خارج الـ container.

 وذلك بسبب وضع margin جهة اليمين له، عليك حذفه ومعالجة الأمر عند مساحة الشاشة التي تظهر بها المشكلة وهي 1200px.

من الأفضل تجنب وضع margin للعناصر لتنفيذ التصميم، واستخدام gap الخاصة بـ Flexbox والـ Padding لتنسيق التصميم.