網格模板列不對齊行上的項目

Question

我是 HTML 和 CSS 新手，我正在嘗試使用 grid-template-column 建立導覽列。

我的想法是將導覽列分為 3 個部分：標誌部分、網站主頁部分和社交連結部分。

問題在於 div navBar 內的元素未連續對齊，但 menuItems div 內的 div 和 Socials div 內的元素正確對齊，但它們之間的間距過大。我缺少什麼嗎？

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

HTML 和 CSS 中的類別命名不一致。在 HTML 中，它被命名為 navbar，在 CSS 中，它被命名為 navBar