grid-template-column导航栏元素未行对齐且间距异常问题

作为HTML和CSS新手，我尝试用grid-template-columns创建导航栏，分为Logo展示区、网站主菜单区、社交链接区三部分。目前遇到两个问题：

• navBar容器内的元素无法在同一行对齐
• menuItems与socials容器内的元素虽能对齐，但彼此间存在过大的间距

请问我遗漏了哪些设置？

核心问题点 #

1. CSS类名大小写不匹配：CSS里定义的是.navBar，但HTML中导航容器的class是navbar（小写b），导致grid布局完全未生效，这是元素无法同行的根本原因。
2. 网格列定义冗余：原grid-template-columns添加了多余的2fr间隔列，直接把Logo、菜单、社交区的列强行隔开，导致间距过大。
3. Logo垂直偏移：.logo里的padding-top:1em会让Logo向下偏移，和菜单、社交图标无法垂直对齐。
4. 内部网格间距不合理：子容器用固定1fr列宽会导致内容间距过大，改用auto适配内容更合理。

修改后的代码 #

CSS代码

html {
  background: #FFFFFF;
}

body {
  background: #FFFFFF;
  z-index: 0;
  margin: 0; /* 移除默认body边距，避免横向滚动 */
}

/* 修正类名为小写navbar，与HTML匹配 */
.navbar {
  z-index: 2;
  display: grid;
  /* 直接定义3列：Logo区、菜单区、社交区，比例按需调整 */
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 70px;
  padding: 0 1em; /* 上下padding设为0，避免高度溢出 */
  color: black; /* 原white会让文字不可见，改为黑色适配图标 */
  align-items: center; /* 让所有子元素垂直居中 */
}

.logo {
  z-index: 2;
  padding-left: 1em;
  /* 移除padding-top，解决垂直偏移问题 */
  width: 180px; /* 和图片宽度一致，避免容器过宽 */
}

.menuItems {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, auto); /* 用auto让列宽适配内容 */
  gap: 1em; /* 用gap控制菜单项间距，比padding更合理 */
  place-content: center; /* 一次性实现水平垂直居中 */
}

.menuItems>div {
  z-index: 2;
  opacity: 0.6;
  text-align: center;
  transition: opacity 0.2s;
}

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

.socials {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1em;
  place-content: center;
}

.socials>div {
  z-index: 2;
}

/*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;
  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: none; /* 移除默认下划线，适配导航栏风格 */
  font-family: inherit;
  font-size: inherit;
}

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

HTML代码

<!-- 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>
      <a href="#"> Shop </a>
    </div>
    <div>
      <a href="#"> Projects </a>
    </div>
    <div>
      <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>

内容的提问来源于Stack Exchange，提问作者Yurim