CSS Box Shadow Is using a shadow On Words When I don't want it to

Question

I am sort of new to coding but when adding a box-shadow to a navbar, it gives a shadow to the #href links as well. I do not want the words to have a shadow, just the bottom of the navbar.

body {
      background-color: grey;
      font-family: 'Poppins', sans-serif;
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--main-white);
    }
    
    #nav {
      display: flex;
      justify-content: flex-end;
      z-index: 1;
      padding: 10px 25px 10px 10px;
      font-size: 35px;
      font-family: 'Poppins', sans-serif;
      color: #ffa2ae;
      box-shadow: 0 2px rgba(0, 0, 0, 0.4);
      text-decoration: none;
    }
    
    #nav {
      background: #81f7ff;
    }
    
    *, *::before, *::after {
        box-sizing: inherit;
      * {
        margin: 0;
        padding: 0
      }

<main> 
  <section id="nav" name="nav"> 
    <a href="#home" id="nav" name="home-nav">Home</a> 
    <a href="#purchase" id="nav" name="purchase-nav">Purchase</a> 
    <a href="#contact" id="nav" name="contact-nav">Contact</a> 
  </section>
</main> 

Answer 1

Looks like this is, because your font/href is in the Navbar Tag if you look at your HTML file and so the Text gets the shadows from your navbar. Try to add the href (or h1 , bzw whatever there is in your HTML file) in your css file and set the shatdows there to 0 or none.

Answer 2

you first need to remove id from all a tag because id must be always unique and must be given for only one element. when you remove id from all a tag style won't be the same because of nav was styling a tag.

giving specific CSS for the specific tag solves your problem.

working demo:

*, *::before, *::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0
}


body {
  background-color: grey;
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--main-white);
}
    
#nav {
  display: flex;
  justify-content: flex-end;
  z-index: 1;
  font-size: 35px;
  background: #81f7ff;
  box-shadow: 0 2px rgba(0, 0, 0, 0.4);
}

#nav a{
    color: #ffa2ae;
    text-decoration: none;
    padding: 10px 25px 10px 10px;
}

<main>
  <section id="nav" name="nav">
    <a href="#home"  name="home-nav">Home</a>
    <a href="#purchase"  name="purchase-nav">Purchase</a>
    <a href="#contact"  name="contact-nav">Contact</a>
  </section>
</main>

Answer 3

It seems your anchor ID was the same to your parent ID which is nav so what you need to do is to remove it and this will fix your problem. Thanks

CSS

body {
      background-color: grey;
      font-family: 'Poppins', sans-serif;
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--main-white);
    }

    #nav {
      display: flex;
      justify-content: flex-end;
      z-index: 1;
      font-size: 35px;
      font-family: 'Poppins', sans-serif;
      box-shadow: 0 2px rgba(0, 0, 0, 0.4);
      background: #81f7ff;
    }

    #nav a{
        text-decoration: none;
        padding: 10px 25px 10px 10px;
         color: #ffa2ae;
    }


    *, *::before, *::after {
        box-sizing: inherit;
      * {
        margin: 0;
        padding: 0
      }

HTML

<main> 
  <section id="nav" name="nav"> 
    <a href="#home"  name="home-nav">Home</a> 
    <a href="#purchase"  name="purchase-nav">Purchase</a> 
    <a href="#contact"  name="contact-nav">Contact</a> 
  </section>
</main>