يظهر اثنين من ال section فوق بعض بدلا من اسفل بعضهم

Ahmed Farid5 · 25 أبريل

يتداخل اخر قسمين في بعضهم رغم انفصالهم عن بعضهم انفصال تام ولا علاقه ببعض

محمد_عاطف · 25 أبريل

الخطأ لديك فى العنصرين

<div class="row text-header">  // سطر رقم 99

<div class="row cards"> // سطر رقم 102

لاحظ انك فى كلا العنصرين قد اضفت الخاصية position: absolute; وهذه الخاصية تقوم بحذف العنصر من ال flow اى انه لن يكون له اى تاثير على العناصر الاخرى من حيث الطول او العرض . لذلك سترى ان العنصر الاب <div class="container-fluid"> لا يمتلك اى طول .

وانصحك بعدم استخدام position: absolute هنا حيث انك تستطيع تنفيذ نفس التصميم فقط باستخدام margin و padding و text-align: center; . ويمكنك استخدام الكود التالى .

section#trending .text-header {
    /* position: absolute;
    top: 20%;
    right: 30%; */
    text-align: center;
    margin-top: -50px;
    /* padding-bottom: 50px; */
}
section#trending .cards {
    /* position: absolute;
    top: 50%;
    left: 1%; */
    margin-left: 5px;
    width: 100%;
}
footer {
    margin-top: 50px;
}