Grid template columns not aligning items on rows

Question

I'm new to HTML and CSS and I'm trying to create a navigation bar using grid-template-column.

My idea is to divide the navigation bar into 3 parts: logo part, website homepage part and social links part.

The problem is that the elements inside the div navBar are not aligned contiguously, but the div inside the menuItems div and the elements inside the Socials div are aligned correctly, but there is too much space between them. Am I missing something?

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

Class naming in HTML and CSS is inconsistent. In HTML it is named navbar and in CSS it is named navBar