درود

ممنون بابت آپلود، اگر باز مشکل وجود داشت میتونید از کدپن استفاده کنید که بی دردسرتر هست.

قضیه خیلی به کلاس col-xs-12 ربطی نداره. به طور کلی وقتی یک کلاس در استایل مینویسیم، در اصل میگیم که اگر المانی اون کلاس رو داشت استایل موردنظر بهش اعمال بشه و اگر یک div دیگر درونش بگذارید میبینید که کلاس موردنظر بهش اعمال نمیشه.

اگر میخواید استایل به محتویات درون اون المان هم اعمال بشه، کافیه که کلاس رو به این صورت اصلاح کنید:

.custom-darkblue-color *{
  background-color: rgb(0, 0, 122) !important;
  color: #fff;
}

یا (راه دوم) بسته به نظرتون html رو اصلاح کنید:

//<div class="row">
     //   <div class="container">
        //  <div class="col-xl-12">
         //   <div class="container-fluid custom-darkblue-color">
         //   ssss
        //  div>
       // div>
      //  div>
     // div>