Mengapa hiasan teks dan bar navigasi tidak berfungsi?

Question

Saya sedang membuat halaman web dan saya menghadapi masalah dengan Navar dan pautan. Item navar saya tidak kekal dalam navar tetapi terapung ke bawah. Selain itu, text-decoration: none; tidak berfungsi, pautan saya digariskan dan didahului dengan titik.

.navbar {
  background: black;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

.navbar__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

.navbar__item {
  height: 80px;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

<nav class="navbar">
  <div class="navbar__container">
    <a href="#home" id="navbar__logo"> COLOR</a>
    <div class="navbar__toggle" id="mobile-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
    <ul class="nabar__menu">
      <li class="navbar__item">
        <a href="#home" class="nabvar__links" id="hope-page">HOME</a>
      </li>
      <li class="navbar__item">
        <a href="#about" class="nabvar__links" id="about-page">ABOUT</a>
      </li>
      <li class="navbar__item">
        <a href="#services" class="nabvar__links" id="services-page">SERVICES</a>
      </li>
      <li class="navbar__btn">
        <a href="#sign-up" class="button" id="signup">SIGN UP</a>
      </li>
    </ul>
  </div>
</nav>

Saya cuba border-bottom: none 和 list-style-type: none; dan ia tidak berkesan. Untuk bar navigasi, saya mencuba flex-direction: row dan itu juga tidak berjaya.

Answer 1

navbar__links navbar__menu Kedua-dua nama kelas ini salah eja dalam HTML

.navbar {
  background: black;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

.navbar__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

.navbar__item {
  height: 80px;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

  

     COLOR
    

      
      
      
    
    

      

        HOME
      
      

        ABOUT
      
      

        SERVICES
      
      

        SIGN UP