Пользовательские цвета фона CSS ReactJS отсутствуют до прокрутки ⇐ CSS

[Anonymous]

У меня возникла странная проблема с моим сайтом ReactJS. Я использовал Bootstrap для панели навигации и вкладок, а для остального — собственный CSS. Проблема в том, что когда я открываю сайт, цвета из моего пользовательского CSS не отображаются должным образом.
Но когда я прокручиваю определенный раздел вверх, цвета появляются. все в порядке, и снова исчезает, когда я спускаюсь на этот участок. Аналогично, когда я открываю два экрана рядом друг с другом в своей системе, цвета отображаются идеально, а когда я открываю их, они исчезают. эта вещь происходит в некоторых разделах, особенно с цветами фона.
Кто-нибудь сталкивался с такой проблемой рендеринга CSS? Есть какие-нибудь советы, как это исправить?
Я также приложил код для этого конкретного раздела, но не знаю, связана ли проблема с конкретным файлом или где-то еще в файлах сайта. .
Я искал это много дней, но не нашел решения. У меня нет большого опыта работы с React JS.
body {
font-family: "Pontano Sans", sans-serif;
background-color: #f5f5f5 !important; /* this colour is not behaving well */
color: #131316;
line-height: 2.4rem;
font-size: 1.6rem;
}
/* -------------WORKING SECTION STYLING------------ */
.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;/* this colour is not behaving well */
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 (


alt="upper arrow icon"
/>

alt="lower arrow icon"
/>
how it works





Define the problem

We begin by deeply understanding your challenges, goals, and needs






Develop a Solution

Our expert team crafts a tailored solution that aligns with your
business objectives






Refine

Once the solution is live, we continuously improve and optimize to
ensure maximum impact and performance.





learn more




);
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... til-scroll