Problems with Setting Links

Hello Everyone! I’m creating my personal portfolio webpage and I’ve encountered a problem that I can not resolve. I’ve been stuck on this problem embarrassingly for about three days. I created a taskbar for my page which required an <a href=> to shoot to the various parts of my page. I created a specific class for it which gives its text and highlight feature. When I go to use <a href=> for my links to click it gives it the class of the items on the taskbar. I’m stumped and I’d appreciate any help!

I put the links that messed up as <b href=> just so my entire page wouldn’t be completely jumbled. Please excuse the imperfections, I’m still in the process of making it.

Here is my codepen:

but there’s no class…

<nav>
  <div class="">
    <ul>
      <li><a href="#Bio">Bio</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>
a, a:visited{width: 150px; color: black; display: inline-block; text-decoration: none; font-size: 20px; text-align: center; padding: 10px; border-radius: 10px; font-family: Raleway; font-weight: bold; }
a:hover {background: #B5D5F9; trasition: 0.6s; }

I just put that in for a placeholder. In my CSS I assigned the

  • with

    li {
    float: left;
    margin-top: 30px;
    margin-left:;
    text-align: Center;
    font-family:;
    }

    what I’m having confusion about it that how could I also embed links without them taking these characteristics

    a,
    a:visited{
    width: 150px;
    color: black;
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-family: Raleway;
    font-weight: bold;
    }

    a:hover
    {
    background: #B5D5F9;
    trasition: 0.6s;
    }

  • since they have the same type <a href=""></a>,
    you should be more specific with your selector

    html

    <ul class="navbar">
      <li><a href="#Bio">Bio</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    

    css

     .navbar a, .navbar a:visited {width: 150px; color: black; display: inline-block; text-decoration: none; font-size: 20px; text-align: center; padding: 10px; border-radius: 10px; font-family: Raleway; font-weight: bold; }
     .navbar a:hover {background: #B5D5F9; trasition: 0.6s; }
    

    Oh my gosh, a million thank yous! Thank you so much for the help!!!