chrome-dev-tools | Down and Dirty with Chrome Dev Tools

Im trying to add scroll to the first found element to search on my page https://be1zebub.github.io/elite-emotes-collection/ for some reason it didnt works in addEventListener("input", ...) but it works fine if im run same code in chrome-dev-tools console

my code:

This is the route code form express backend and MongoDB database and normal call from frontend with fetch("/") it was returning index.html code and on adding fetch("http://localhost:9000") it was returning CORS Error so I added app.use(cors()).

I've a create-react-app with which is served from express. Express is serving only as a proxy for the app. The application logic is in CRA.

I'm trying to call an API and to download a file. The api responds back with a "Content-Disposition" header which contains the file name. I'm unable to retrieve the header in my call.

When I call the API in Postman/chrome-dev-tools, I can see the header available.

Please see my code below. The filename code is commented out because res.headers is empty.

I am trying to modify the CSS in a Wordpress plugin I need to use. The stylesheet (learnpress.css) is over 2000 lines long, so understanding it is a challenge; but what I'm trying to do is pretty simple -- change the background color of a certain class.

The code is at https://tgtau.rickcasey.net/courses/the-great-turning-you/, but when I change the background color of the section-content class in Chrome's developer tools, nothing happens:

Can anyone point out how I can find out what other css styles are overriding this? Other posts only hint at CSS being difficult to diagnose how inheritance and precedence work, so I'm hoping there are some techniques in chrome-dev-tools on how to do that. Thanks!