I’m unable to match the colors of the header buttons from the completed site.
I know it acknowledges the “.nav-pills” class because it is giving me the correct font/border color, but it won’t change color when I hover over it or keep the “About” button red.
It’s not a huge deal, but I want to actually get every aspect of this project.
Thanks for your help!
<html>
<head>...</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>BestBite</h1>
</div>
<div class="col-md-6">
<ul class="nav nav-pills nav-justified">
<li><a href="#" class="Active">About</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--In my actual code, I have actual links, but for the sake of simplicity I used "#" here. I've also verified that tags are properly closed, no error messages and that everything sits in the div it's supposed to.-->
.nav-pills li a {
color: #d8192f;
}
.nav-pills li a {
color: #d8192f;
border: 1px solid #d8192f;
margin-left: 10px;
text-align: center;
width: 100px;
}
.nav-pills li.active a {
background-color: #d8192f;
color: #ffffff;
}
.nav-pills a:hover {
background-color: #d8192f;
color: #fffff;
}