个人页面开发：Flex布局下底部左右盒子对齐异常求助

我正在开发一款个人介绍页面，目前遇到布局对齐问题：页面底部的左右两个盒子无法按预期对齐，左侧盒子位置略低于右侧盒子，无法实现两者顶部齐平的效果。以下是当前使用的HTML与CSS代码，同时附上效果示意图，请求帮助解决该对齐问题。

当前CSS代码 #

.top {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 30px;

}

#nick {
  border: 4px double;
  border-radius: 10px;
  padding: 10px 10px;
  width: 63%;
  background-color: rgba(0, 0, 0,0.7);
  color: gold;
  border-color: #B2B2F9;
}

.huge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin-top: 40px;
  gap: 40PX;
}

.leleft {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ni {
  border: 4px double ;
  border-radius: 10px;
  padding: 5px 5px;
  width: 200px;
  text-align: center;
  background-color: rgba(0, 0, 0,0.7);
  color: #B2B2F9;
  border-color: white;
}

.leright {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 850px;
}

.purpose {
  border: 4px double;
  border-radius: 10px;
  padding: 5px 5px;
  background-color: rgba(0, 0, 0,0.7);
  color: #B2B2F9;
  border-color: white;
  align-self:flex-start;
}

当前HTML代码 #

<div class="top">
    <h1 id="nick">sdasd</h1>
</div>
<div class="huge">
    <div class="leleft">
        <div class="ni">
        <h2>es</h2>
        <hr>
        <hr>
        esss
        </div>
    </div>
    <div class="leright">
    <div class="purpose">
    <h2>asdasd</h2>
    <HR>
    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eum assumenda neque deserunt atque. Sunt dolore et magnam numquam, error at sit laudantium fugiat consequuntur cum. Veniam tenetur error vel!</div>
    </div>
</div>
</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eum assumenda neque deserunt atque. Sunt dolore et magnam numquam, error at sit laudantium fugiat consequuntur cum. Veniam tenetur error vel!</div>

效果示意图 #

解决方案 #

1. 修复对齐问题 #

问题核心在于.huge容器设置了align-items: center，这会让内部的flex子项在垂直方向居中对齐，导致左侧盒子低于右侧。将该属性改为align-items: flex-start，即可让两个盒子顶部齐平：

.huge {
  display: flex;
  align-items: flex-start; /* 替换原有的center */
  justify-content: center;
  flex-direction: row;
  margin-top: 40px;
  gap: 40px;
}

2. 清理无效HTML代码 #

原HTML存在两处错误，可能影响布局稳定性：

• 末尾多余的</div>Lorem ipsum...vel!</div>无效代码，需删除
• .purpose容器内的<p>标签未闭合，需补充</p>

清理后的HTML代码：

<div class="top">
    <h1 id="nick">sdasd</h1>
</div>
<div class="huge">
    <div class="leleft">
        <div class="ni">
            <h2>es</h2>
            <hr>
            <hr>
            esss
        </div>
    </div>
    <div class="leright">
        <div class="purpose">
            <h2>asdasd</h2>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eum assumenda neque deserunt atque. Sunt dolore et magnam numquam, error at sit laudantium fugiat consequuntur cum. Veniam tenetur error vel!</p>
        </div>
    </div>
</div>

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