Les colonnes du modèle de grille n'alignent pas les éléments sur les lignes

Question

Je suis nouveau en HTML et CSS et j'essaie de créer une barre de navigation en utilisant grid-template-column.

Mon idée est de diviser la barre de navigation en 3 parties : une partie logo, une partie page d'accueil du site et une partie liens sociaux.

Le problème est que les éléments à l'intérieur du div navBar ne sont pas alignés de manière contiguë, mais le div à l'intérieur du menuItems div et les éléments à l'intérieur du div Socials sont correctement alignés, mais il y a trop d'espace entre eux. Est-ce que j'ai raté quelque chose ?

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

La dénomination des classes en HTML et CSS est incohérente. En HTML, il s'appelle navbar，在 CSS 中，它被命名为 navBar