问题：无法将页面中的h1标题元素设置为右对齐

你遇到的问题根源在于.title容器内的<a>标签是行内元素，默认仅包裹自身内容宽度，导致text-align: right没有足够的空间来体现对齐效果。下面是两种可行的修复方案：

方案一：将<a>标签设为块级元素 #

修改.title a的样式，让它占满父容器的宽度：

.title {
  margin: 20px;
  margin-bottom: 50px;
  padding: 10px;
  border: 6px solid black;
  display: inline-block;
  text-align: right;
  width: fit-content;
}

.title a {
  display: block; /* 让a标签占满.title的宽度 */
}

.title h1 {
  margin: 5px 0;
  white-space: nowrap;
}

方案二：直接给<h1>设置宽度并右对齐 #

如果不想修改<a>的显示类型，可以直接给<h1>设置width: 100%并指定对齐方式：

.title h1 {
  margin: 5px 0;
  white-space: nowrap;
  width: 100%;
  text-align: right;
}

两种方案都能让<h1>文本在.title的边框容器内实现右对齐效果，你可以根据实际需求选择其中一种。

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