Button color won't change

https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_bestbite?link_content_target=interstitial_project

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;
}

hi atxeric,

There are some minor issues in your pasted code.

Your css says: "find <li> element with class 'active'  and style it's child element <a> with specified styles".
But there are no <li> elements with class 'active' in your html.

In your case it would be something like this:

.nav-pills li a.Active {
      background-color: #d8192f;
      color: #ffffff;
}

Ah, so because I attached the “Active” class to the “a” and not the “li” it got confused.

I took that a step further and added “li” to my hover selector and that fixed the other issue as well.

Thanks Sauliusp!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.