After integrating Bootstrap into my project, I noticed that the colors of the -li- tags became disordered and changed to a different color. How can I manage the colors while using Bootstrap in my project and also control them when hovering?
<nav>
<ul class="nav-menu">
<li><a href="#section-1"><span>Introduction</span></a></li>
<li><a href="#section-2"><span>Events</span></a></li>
<li><a href="#section-3"><span>Art Activities</span></a></li>
<li><a href="#section-4"><span>Productions</span></a></li>
<li><a href="#section-5"><span>Movies </span></a></li>
<li><a href="#section-6"><span>Shows </span></a></li>
<li><a href="#section-7"><span>Acting</span></a></li>
<li><a href="#section-8"><span>Writing</span></a></li>
</ul>
</nav>
css:
nav>ul>li{
/* width: 8%; */
height: 100%;
float: right;
margin-left: 1%;
text-align: center;
line-height: 100px;
font-family: sans-serif;
font-size: 23px;
color:white;**(not functioning with added bootstrap)**
}
nav>ul>li:hover{
background-color: rgb(214, 214, 214);
color: black;**(not functioning with added bootstrap)**
}