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

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

<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;
}

ويمكنك استخدام اى قيمة كما تحب من حيث البعد عن العناصر margin او padding .

وقد قمت بارفاق الملف لك بعد التعديل.

style.css