لماذا عندما أقوم بتغير الخاصية width تأتي العناصر فوق بعضها وليست بجانب بعضها ؟

إذا كنت تريدهم على نفس الخط وبنفس الوقت متجاوب responsive تحتاج أولاً إعطاء الحافظة feature عرض كامل الشاشة %100 وتحديد خاصية flex-wrap بالقيمة wrap أي أن العناصر ستقوم بالنزول الى سطر جديد عندما لا يتسع عرض الشاشة لها جميعاً. يمكنك أيضاً إستعمال media query للتحكم أكثر بتجاوبية التصميم من خلال تعديل خواص flex box.

	#feature {
	  width: 100%;  /* تعديل عرض الحافظة */
	  display: flex;
	  align-items: center;
	  justify-content: space-between; /*flex-start الأفضل يكون  */
	  flex-wrap: wrap; /* تعديل طريقة ملء الحافظة بالعناصر */
	  gap: 20px;
	 
	}
	 
	

اعتقد ان المشكلة هي انك لم تعطي البطاقات عرض ثابت بل اعتمدت على الـ padding.

جرب إضافة الخصائص التالية للبطاقات :

#feature .fe-box {
  width: 15%;  /* الكود المضاف */
  padding: 25px 0;  /* الكود المضاف */
  /* padding: 25px 25px; */ /* الكود المحذوف */
  text-align: center;
  border: #088178 1px solid;
}

حيث انه لديك 6 بطاقات واعطينا لكل منها 15% من عرض الاب لتأخذ البطاقات 15*6 = 90% من عرض الأب ويبقى 10% من عرض الاب كمسافات بين البطاقات.

وتستطيع التعديل بقيمة الـ 15% حتى تحصل على الشكل الذي تريده.

وبهذه الحالة فأنت لست بحاجة لإضافة الخصائص التالية للـ feature :

max-width: 100%;
overflow-x: hidden;

لأن عرض البطاقات اصبح يحدد بالنسبة لعرض الاب.

للاسف مش ظبتت دي النتيجة 

بتاريخ منذ ساعة مضت قال Ziad Mohamed10:

للاسف مش ظبتت دي النتيجة 

قم بجعل flex-wrap بالقيمة wrap بهذا الشكل ولقد قمت بتقليل gap بين العناصر إلى 10

#feature {
  width: 100%; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px; 
}

ثم قم باضافة الخاصية flex-basis إلى الصنف fe-box بهذا الشكل 

#feature  .fe-box {
  text-align: center;
  border: #088178 1px solid;
  padding: 25px 25px;
  flex-basis: 15%;
}

ثم بعد ذلك في تجاوبية الشاشات يمكنك media وتعديل الشكل حسب ما تريد 

قم بتنفيذ التعديلات وأخبرنا بالنتيجة