ممكن حل لمشكلة عويصة في تصميم موقعي ؟

السلام عليكم اعضاء هذا المجتمع الرائع

من فضلكم أحتاج مساعدتكم لحل مشكلة اعترضتني أثناء تكويدي للاندينج بيج (landing page) و ذلك للتمرن فقط و كسب الخبرة.

المشكلة تتمثل في عدم قدرتي على اضافة محتوي آخر تحت آخر بلوك قمت بأنشاءه. حتى يتوضح المشكل أكثر هذه صفحة الموقع :

و كما تلاحظون فهناك تداخل في مكونات الصفحة حيث أن عنصر المسمى "Reach Your Audience" يتموضع في مكان خاطئ و ذلك نتيجة لأضافتي النص باسفل الصفحة.

هذا هو شكل المفترض للموقع أن يكون:

كود css الخاص بالموقع:

كود html الخاص بالموقع:

أعلم أنني أطلت كثيرا و ربما لم أستطع شرح مشكلتي بدقة لكن ارجوا منكم الأهتمام بالامر و مساعدتي و شكرا جزيلا لكم.


ليست مشكلة عويصة, لديك مشكلة في فهم عمل وسم float

حسنا اقرأ شيئا عنه من جديد وستكتشف خطأك البسيط

ثم اهتم بقيم margin يجب ان تكون دقيقة لكي لا تعرقل تناسق float

بالتوفيق

لقد استعملت float لجعل عدة ديفات في سطر واحد، و بالنسبة للمارجن الذي بينهم فقد عدلته بالنسبة المائوية بحيث تكون المسافات بين الديفات الثلاثة متساوية.

ساراجع بعض دروس float و ارجوا ان تكون المشكلة منها و شكرا :)

اخى عندما يكون div لها نفس خصائص div اخرى الاحسن ان يتم استخدام class مشترك لهم

بمعنى انت فى ال جزء الخاص بال icon الذى يوجد اسفلة عنوان و محتوى استخدم id first , هكذاsecond و لاكن الثلاث divs متشابهين بنفس الخصاص

فكان يجب عمل كلاس واحد و ليكن اسمة item و اعطائة الخواص الازمة من Css و اعطائة لجميع ال items div