مشكلة تكويد قالب html

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

كيف حالكم اخواني
اتمنى منكم مساعدتي في هذه المشكلة
وهو انني اقوم اولاً بعمل كلاس في div معين واربطه بـ ul li لكن يبقى هذا التنسيق مستمر مستمر الى ماله نهايه يعني يكون هو الاب 
مثال:

رمز PHP:

        <vid class="[COLOR="Red"]featured-work[/COLOR] text-center"> 
          <div class="container"> 
            <h2>من داخل التطبيق</h2> 
            <p> hello </p> 
            <ul class="list-unstyled row"> 
              <li data-class="الكل" class="col-md active">الكل</li> 
              <li data-class=".صور" class="col-md">صور</li> 
              <li data-class=".فيديو" class="col-md">فيديو</li> 
          </ul> 
       </div> 
      </div>  

باللون الاحمر اسم الكلاس في ملف style.css

حسناً الان اذهب الى ملف style.css لاضافة التنسيقات هناك:
 

رمز Code:

.featured-work ul{ margin-top: 40px; } .featured-work ul li{ color: #74777a; border: 2px solid #74777a; padding: 10px 20px; margin-left: 10px; margin-bottom: 10px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .featured-work ul li.active, .featured-work ul li:hover{ background-color: #ff6131; border: 2px solid #ff6131; color: #fff; } .featured-work ul li:hover{ cursor: pointer; }

وقمت بعمل عده اسطر في ملف html و css والان س اقوم باضافة ul جديدة في مكان بعيد على بعد 100 سطر بعد ما اقفل div ul الاولى :
 

رمز Code:

<div class="helpful-links"> <h2>روابط مهمة</h2> <div class="row"> <div class="col"> <ul class="list-unstyled"> <li>روابط الموقع</li> <li>الخريطة</li> <li>اتصل بنا</li> </ul> </div>

الان قمت بالذهاب الى قوقل كروم لفحص العنصر واضافة التنسيقات اجده اخذ صفات الكلاس الاول featured-work 
قمت بالتعديل من ملف css اخذ صفات الكلاس الجديد لكن بقي ايضا متمسك بكلاس featured-work اي ان الاشياء التي
لم اضفها الى كلاس helpful-links قام ب استيرادها من كلاس featured-work

اليكم الصور لتفهموها اكثر 
الصورة رقم 1 هي لبداية كتابة الكلاسhelpful-links
الصورة رقم 2 كتابة تنسيقات كلاسhelpful-links
الصورة رقم 3 قام بتجاهل تنسيقات كلاس helpful-links واخذ تنسيقات كلاس featured-work







ارجو منكم افادتي فقد قمت بمراجعة الكود اكثر من مره وجلست يومين احاول حله بدون مساعدة وهذا اول قالب لي بالحياة اقوم بتصميمة من الصفر
شكراً لكم مقدماً,