Отсутствие пользовательских цветовых фонов в ReactJS до прокрутки

У меня возникла странная проблема с моим сайтом на ReactJS. Я использовал Bootstrap для навигационной панели и вкладок, а для остального – собственные стили CSS. Проблема в том, что при открытии сайта цвета из моего пользовательского CSS отображаются некорректно.

Однако, когда я прокручиваю определенный раздел вверх, цвета появляются нормально, а при прокрутке вниз в этом же разделе они снова исчезают. Аналогично, когда я открываю два экрана рядом на своем компьютере, цвета отображаются идеально, а при открытии снова исчезают. Это происходит в некоторых разделах, в частности с фоновыми цветами.

Столкнулся ли кто-то с подобной проблемой рендеринга CSS? Какие-нибудь советы по ее исправлению?

Я также прикрепил код для этого конкретного раздела, но не знаю, проблема ли в конкретном файле или где-то еще в файлах сайта.

Я искал решение многие дни, но не нашел. У меня не очень много опыта с React JS.

body {
  font-family: "Pontano Sans", sans-serif;
  background-color: #f5f5f5 !important; /* этот цвет ведет себя неправильно */ 
  color: #131316;
  line-height: 2.4rem;
  font-size: 1.6rem;
}
/* -------------СТИЛИЗАЦИЯ РАБОЧЕГО РАЗДЕЛА------------ */
.working-section {
  margin-top: 12.6rem;
  position: relative;
}
.working-card-row1 {
  margin-top: 10.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 90px;
  justify-content: center; 
  align-items: center; 
}
.working-card-row1 .working-card {
  align-content: center;
  background: rgba(247, 246, 251, 1) !important; /* этот цвет ведет себя неправильно */ 
  flex: 1 1 326px;
  max-width: 326px;
  min-height: 370px;
  padding: 3.9rem 4.3rem;
  text-align: left;
  border-radius: 30px;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.315);
}
.working-card:hover {
  transform: translateY(-9px);
  transition: all 0.3s ease-in-out;
}
.icon-container {
  margin-bottom: 4.7rem;
  height: 110px;
  width: 110px;
  display: flex;
  border-radius: 20px;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  padding: 0 auto;
}
.icon-container img {
  width: 38px;
  height: 35px;
}
.upper-arrow,
.lower-arrow {
  width: 173px;
  height: 31px;
  z-index: 4;
  position: absolute;
}
.upper-arrow {
  top: 40%;
  left: 25%;
}
.lower-arrow {
  top: 59%;
  left: 59%;
}

import "../index.css";
export default function Working() {
  return (
    <div className="working-section wrapper">
      <img
        className="upper-arrow"
        src="./working-images/upper-arrow.png"
        alt="иконка верхней стрелки"
      />
      <img
        className="lower-arrow"
        src="./working-images/lower-arrow.png"
        alt="иконка нижней стрелки"
      />
      <h1 className="lg-heading">как это работает</h1>
      <section className="working-card-row1">
        <section className="working-card">
          <div className="icon-container">
            <img src="./working-images/search-icon.png" alt="иконка поиска" />
          </div>

          <h1 className="md-heading">Определите проблему</h1>

          <br />
          <p className="services-para2">
            Мы начинаем с глубокого понимания ваших проблем, целей и потребностей.
          </p>
        </section>
        <section className="working-card">
          <div className="icon-container">
            <img src="./working-images/engine-icon.png" alt="иконка двигателя" />
          </div>

          <h1 className="md-heading">Разработайте решение</h1>

          <br />
          <p className="services-para2">
            Наша команда экспертов разрабатывает индивидуальное решение, которое соответствует вашим бизнес-целям.
          </p>
        </section>
        <section className="working-card">
          <div className="icon-container">
            <img src="./working-images/pen-icon.png" alt="иконка ручки" />
          </div>

          <h1 className="md-heading">Уточните</h1>
          <br />
          <p className="services-para2">
            После того, как решение будет запущено, мы постоянно улучшаем и оптимизируем его, чтобы обеспечить максимальное воздействие и производительность.
          </p>
        </section>
      </section>
      <button className="nextPage-btn">
        <a href="">
          узнать больше
          <img className="arrow-icon" src="./arrow.png" alt="" />
        </a>
      </button>
    </div>
  );
}