CSS Grid中justify-items无效求助：容器有足够空间却无法对齐到末端

我是编程新手，基本掌握HTML/CSS知识，但遇到了CSS Grid布局的问题：容器明明有足够空间，却无法将内容对齐到盒子末端，我甚至为元素添加了边框来确认空间存在。请帮我排查原因。

我的HTML代码 #

<html lang="en">

<head>
  <link href="./resources/css/index.css" rel="stylesheet">
  </link>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bryan Portfolio</title>
</head>

<body>
  <header>
    <div id="grid1">
      <div class="spacer-left"></div>
      <div class="header-left"><img id="logo" src="./resources/logo/letterLogo.png"></div>
      <div class="header-right">
        <ul class="social-media">
          <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li>
          <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li>
          <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li>
        </ul>
        <ul class="nav">
          <li>Main</li>
          <li>Projects</li>
          <li>Videos</li>
          <li>Photography</li>
        </ul>
      </div>
      <div class="spacer-right"></div>

    </div>

  </header>
  <div id="jumbotron">

  </div>

</body>

</html>

我的CSS代码 #

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body{
   background: color #f8f8f8;
   color: #262626;
 }
 
header{padding-top: 20px;}

#grid1{ 
 display: grid;
 grid-template-columns: 5% 1fr 1fr 5%;
 grid-auto-rows: 50px;
 grid-row-start: 1;
 grid-row-end: 3;

}
.header-left{
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 3;
}
.header-right{
 
justify-self: end;
align-self: center;
 grid-column-start: 3;
 grid-column-end: 4;
 grid-row-start: 1;
 grid-row-end: 3;
 
}

.social-media{
 border: 1px red solid;
 grid-row-start: 1;
 grid-row-end: 2;
}

nav{
 grid-row-start: 2;
 grid-row-end: 3;
}
li{
 display: inline;
}
#logo{
 max-height: 100px;

}
.sm-icon{
max-height: 25px;
border: 1px blue solid;
}

问题原因与修复方案 #

1. 核心问题：header-right未设置为Grid容器 #

你给外层的#grid1加了Grid布局，但header-right作为内部容器，本身不是Grid容器，所以你给.social-media和nav设置的grid-row-start/end完全无效，这些元素默认是流式布局，自然不会按你的预期对齐。

2. 其他错误点 #

• 选择器错误：HTML里导航是<ul class="nav">，但CSS里写的是nav{...}，这会匹配<nav>标签而非class为nav的列表，应改为.nav{...}。
• 语法错误：body中的background: color #f8f8f8写法错误，正确应为background-color: #f8f8f8或background: #f8f8f8。
• 无效属性：#grid1不是任何Grid容器的子元素，设置grid-row-start/end没有意义，可删除。

修正后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #f8f8f8; /* 修正背景色语法 */
  color: #262626;
}

header{padding-top: 20px;}

#grid1{ 
  display: grid;
  grid-template-columns: 5% 1fr 1fr 5%;
  grid-auto-rows: 50px;
  /* 删除无效的grid-row属性 */
}

.header-left{
  grid-column: 2 / 3; /* 简化grid-column写法 */
  grid-row: 1 / 3;
}

.header-right{
  display: grid; /* 设置为Grid容器 */
  grid-template-rows: 50px 50px; /* 定义两行高度 */
  justify-self: end;
  align-self: center;
  grid-column: 3 / 4; /* 简化写法 */
  grid-row: 1 / 3;
}

.social-media{
  border: 1px red solid;
  grid-row: 1 / 2; /* 现在该属性生效 */
}

.nav{ /* 修正选择器 */
  grid-row: 2 / 3;
}

li{
  display: inline;
}

#logo{
  max-height: 100px;
}

.sm-icon{
  max-height: 25px;
  border: 1px blue solid;
}

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