如何不使用投机方案调整导航栏位置，使其与下方第三张图片右边缘对齐

实现方案 #

核心逻辑是让导航容器和下方main区域使用完全一致的网格布局，保证二者列宽、间距完全同步，任意窗口尺寸下都能精准对齐，不会出现错位问题。

首先修正原HTML的语法错误：原代码中<header>标签写在了<body>外部，需调整结构把header放到body内部。

修改后完整HTML代码

<html>
<body>
  <header>
    <nav>
      <ul class="navigation">
        <li><a href="index.html">Home</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>
  </header>
  <main class="grid">
    <aside></aside>
    <section>
      <h1>Header</h1>      
      <img src="https://via.placeholder.com/620x350.jpg" alt="占位图">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
        placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
        diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
        commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
      </p>
    </section>
    <section>
      <h1>Header</h1>
      <img src="http://placehold.it/620x350.jpg" alt="占位图">        
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
        placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
        diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
        commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
      </p>
    </section>
    <section>
      <h1>Header</h1>      
      <img  src="http://placehold.it/620x350.jpg" alt="占位图">       
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
        placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
        diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
        commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
      </p>
    </section>
    <aside></aside>
  </main>
</body>
</html>

修改后完整CSS代码

* {
  box-sizing: border-box;
  /* 重置浏览器默认边距，避免对齐偏差 */
  margin: 0;
  padding: 0;
}

header {
  margin-top: 0;
  width: 100%;
  height: 80px;
  filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
  background-color: whitesmoke;
  /* 和main使用完全一致的网格布局，保证列宽、间距同步 */
  display: grid;
  grid-template-columns: 20% 20% 20% 20% auto;
  grid-gap: 20px;
}

header nav {
  /* nav占据第2-4列，右边界刚好和下方第三个section的右边界对齐 */
  grid-column: 2 / 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.navigation {
  list-style-type: none;
  display: flex;
}
li a{
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  font-size: 24px;
}

main {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% auto;
  grid-gap: 20px;
  margin-top: 20px;
}

aside {
  margin: 0;
}

section h1 {
  text-align: center;
  /* 补全缺失的px单位 */
  font-size: 24px;
  font-weight: bold;
}

section img {
  width: 100%;
}

section img:hover {
  opacity: 50%;
  transition: 0.1s;
}

section p {
  font-size: 18px;
}

主要修改说明

• 给header添加了和main完全相同的网格配置，窗口缩放时二者布局会同步变化，不会出现对齐失效问题
• 给nav指定了网格范围，使其右边界和下方第三个section的右边界完全重合，自然实现About链接尾部和图片右边缘对齐的效果
• 修正了原代码中的语法错误：将无效的margin-top: none改为margin-top: 0，给h1的字体大小补全了px单位
• 重置了浏览器默认边距，避免默认样式导致的布局偏差
• 调整了导航的垂直对齐规则，让导航链接在header中垂直居中

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