Answer 1

You already fixed the problem you're asking about, right?

I see this in your CSS. This would override Bootstrap's a:hover color because it is a stronger selector.
#a1:hover {
color:#7fff00;
}

#a2 {
color:green;
}

Here are some stronger selectors that will also override the styles for the active anchor element. These also don't rely on the id attribute.

nav.navbar ul.nav.navbar-nav li.nav-item a:hover,
nav.navbar ul.nav.navbar-nav li.nav-item a.active {
color:#7fff00;
}

nav.navbar ul.nav.navbar-nav li.nav-item a {
color:green;
}

Unrelated to your question but there's a minor problem with your Google font link.
You should replace & with & to be valid HTML5. Sololearn's code editor points this out with an "x" on the line. I say it is minor because while it is invalid HTML5, your code is likely handled well by most web browsers' quirks mode.
<link href="https://fonts.googleapis.com/css2?family=Baloo+Da+2&ampamp;display=swap" rel="stylesheet">

Using a stronger selector is what I would recommend too. Keep up the good work.

Let me know if you're asking about a continuing problem.