Lajur templat grid tidak menjajarkan item pada baris

Question

Saya baru dalam HTML dan CSS dan saya cuba mencipta bar navigasi menggunakan grid-template-column.

Idea saya adalah untuk membahagikan bar navigasi kepada 3 bahagian: bahagian logo, bahagian halaman utama laman web dan bahagian pautan sosial.

Masalahnya ialah elemen di dalam div navBar tidak dijajarkan secara bersebelahan, tetapi div di dalam menuItems div dan elemen di dalam div Socials dijajarkan dengan betul, tetapi terdapat terlalu banyak ruang di antara mereka. Adakah saya kehilangan sesuatu?

html {
  background: #FFFFFF;
}

body {
  background: #FFFFFF;
  z-index: 0;
}

.navBar {
  z-index: 2;
  display: grid;
  grid-template-columns: [start] 1fr [logo-end] 2fr [item-start] 4fr [item-end] 2fr [social-start] 1fr [social-end];
  grid-template-rows: 70px;
  padding: 1em;
  color: white;
}

.logo {
  z-index: 2;
  grid-column: start/logo-end;
  align-self: center;
  padding-left: 1em;
  padding-top: 1em;
  width: 300px;
}

.menuItems {
  z-index: 2;
  grid-column: item-start/item-end;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-content: center;
  justify-content: center;
}

.menuItems>div {
  padding-right: 1em;
  z-index: 2;
  opacity: 0.6;
  justify-self: center;
  align-self: center;
  text-align: center;
  transition: opacity 0.2s;
}

.menuItems>div.active {
  z-index: 2;
  opacity: 1;
}

.socials {
  z-index: 2;
  grid-column: social-start/social-end;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  justify-content: center;
}

.socials>div {
  z-index: 2;
  padding-right: 1em;
}


/*TOOL TIPS*/

.tooltip {
  z-index: 2;
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  z-index: 2;
  visibility: hidden;
  width: 120px;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 2px 0;
  position: absolute;
  z-index: 1;
  top: 80%;
  left: 50%;
  margin-left: -60px;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  z-index: 2;
  visibility: visible;
  opacity: 1;
}

.basicFooter {
  z-index: 2;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: left;
  padding: 1em;
}

a {
  color: inherit;
  text-decoration-color: inherit;
  font-family: inherit;
  font-size: inherit;
}

a:hover {
  color: inherit;
  text-decoration-color: inherit;
  font-family: inherit;
  font-size: inherit;
}

<!-- Head -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://kit.fontawesome.com/053ac89fca.js" crossorigin="anonymous"></script>


<!-- Body -->
<!--script src="scripts/mainSketch.js"></script-->
<div class="navbar">
  <div class="logo">
    <a href>
      <img src="logo.png" alt="SDiCesare.it" width="180" height="60">
    </a>
  </div>
  <div class="menuItems">
    <div class="active">
      <a href> Home </a>
    </div>
    <div class="active">
      <a href> Shop </a>
    </div>
    <div class="active">
      <a href> Projects </a>
    </div>
    <div class="active">
      <a href> Github </a>
    </div>
  </div>
  <div class="socials">
    <div>
      <a href="https://github.com/SDiCesare">
        <div class="tooltip">
          <i class="fa-brands fa-github" style="font-size:24px;color:black" /></i>
          <span class="tooltiptext">GitHub</span>
        </div>
      </a>
    </div>
    <div>
      <a href="https://www.instagram.com/simone.greil/">
        <div class="tooltip">
          <i class="fa-brands fa-square-instagram" style="font-size:24px;color:black"></i>
          <span class="tooltiptext">Instagram</span>
        </div>
      </a>
    </div>
  </div>
</div>

Answer 1

Penamaan kelas dalam HTML dan CSS tidak konsisten. Dalam HTML ia dinamakan navbar，在 CSS 中，它被命名为 navBar