导航栏Grid列对齐失效及链接text-transform不生效问题求助

我来帮你排查这两个问题，一步步拆解解决：

一、导航链接与Logo无法对齐的问题 #

你的代码里有几个关键问题导致了对齐失效：

1. Grid布局参数错误：你用grid-template: auto auto是设置行模板，而非列模板，应该改用grid-template-columns来定义两列布局；同时inline-grid会让容器宽度自适应内容，和你设置的width:100%冲突，换成grid更合适。
2. 默认外边距干扰：h1标签自带上下外边距，会把Logo区域撑高，导致和链接区域垂直错位，需要重置这个默认边距。
3. 缺少垂直对齐设置：给.navbar加上align-items: center，让两列内容在垂直方向居中对齐。

修改后的CSS代码：

body { font-family: 'Roboto', sans-serif; /* 这里你拼写错了Robo，应该是Roboto */ }
.navbar { 
  display: grid; /* 替换inline-grid */
  grid-template-columns: auto 1fr; /* 第一列自适应，第二列占满剩余空间 */
  align-items: center; /* 垂直居中对齐核心设置 */
  column-gap: 20px; /* 用标准的column-gap替代grid-column-gap */
  border-bottom: 1px solid rgb(196, 196, 196); 
  background-color: #F7F9F9; 
  padding: 10px 20px; /* 左右加内边距，避免内容贴容器边缘 */
  width: 100%;
  box-sizing: border-box; /* 防止padding撑宽容器 */
}
.logo { grid-column: 1/2; }
.links { 
  grid-column: 2/3; /* 之前写的2/2是错误的，需指定结束列位置 */
  text-align: right; /* 让链接靠右对齐，视觉更协调 */
}
.logo h1 { 
  font-size: 32px; 
  font-weight: 340; 
  margin: 0; /* 重置h1默认上下外边距 */
}
.links a { 
  text-transform: capitalize; 
  text-decoration: none; 
  font-size: 20px; 
  padding-left: 40px; 
}

二、text-transform: capitalize未生效的问题 #

你当前的链接文本（比如Experience、Projects）本身就是首字母大写的格式，而text-transform: capitalize的作用是将每个单词的首字母转为大写，其余字母转为小写。如果原始文本已经是首字母大写，这个属性自然看不出视觉变化。

如果想要验证这个属性的效果，你可以把HTML里的链接文本改成全小写：

<div class="links">
  <a href="#">experience</a>
  <a href="#">projects</a>
  <a href="#">technology stack</a>
  <a href="#">contact</a>
</div>

此时text-transform: capitalize就会自动把它们转换成首字母大写的格式，和你现在的显示效果一致，也能体现属性的作用。

内容的提问来源于stack exchange，提问作者Rick