WordPress站点头部Grid布局文本无法右对齐问题求助

修复方案 #

问题出在现有Grid规则冲突，以及文本块没有明确设置网格内的右对齐规则，按以下修改CSS即可：

修改后的完整CSS代码

.site-branding {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  /* 确保容器占满外层全宽，无额外左右边距缩进 */
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
  box-sizing: border-box;
}

.custom-logo-link {
  grid-row: 1/3;
}

.site-title, .site-description {
  margin: 0;
  /* 保留原有垂直对齐规则 */
  align-self: end;
  /* 让元素在第二列网格内靠右对齐 */
  justify-self: end;
  text-align: right;
}

.site-description {
  grid-column: 2;
}

.custom-logo {
  width: 300px;
  max-width: none;
}

关键修改说明

• 移除了冲突的justify-content: space-between规则：grid-template-columns: auto 1fr已经明确第一列自适应logo宽度、第二列占满所有剩余空间，该规则在此场景下无效且会干扰布局
• 新增justify-self: end规则：让站点标题、描述两个元素在第二列的网格区域内强制靠右对齐，直接贴紧容器右边缘
• 补充容器宽度规则：避免站点 branding 容器本身存在默认边距/宽度不足导致的整体缩进
  如果修改后仍存在少量缩进，检查site-branding的外层父容器（通常是主题默认的头部容器）是否有自带的左右内边距，给对应外层容器添加padding-inline: 0即可解决。

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