如何让小div的border-bottom与父级大div的border-bottom高度对齐

核心目标是让子菜单的下边框与头部父容器的下边框完全对齐，可通过以下样式调整实现：

方案1：偏移子元素边框（改动最小） #

子元素下边框错位是因为默认情况下子元素布局在父容器的content区域内，父容器的border-bottom位于自身盒模型的最外侧，两者存在固定间距，只要将子元素的下边框向下偏移对应间距即可重合。
需要调整的样式如下：

.main-navigation-link .main-navigation-link-text {
  border-bottom: 7px solid #F18000; /* 可选：调整边框高度和父容器一致，避免高度差 */
  color: #F18000;
  padding-bottom: 0; /* 去掉原有内边距 */
  margin-bottom: -7px; /* 负margin向下偏移，值等于父容器nav-main的border-bottom高度 */
}

/* 可选优化：让导航链接高度撑满父容器，文字保持垂直居中 */
.nav.main-navigation-menu {
  align-items: stretch;
  height: 100%;
}
.main-navigation-link {
  display: flex;
  align-items: center;
}

方案2：统一边框逻辑（更易维护） #

直接去掉父容器的下边框，改为给所有导航链接设置默认底部边框，激活状态的链接单独设置橙色边框，天然不存在对齐问题：

/* 去掉父容器原有下边框 */
.nav-main {
  border-bottom: none;
}

/* 所有导航链接默认加红色下边框 */
.main-navigation-link .main-navigation-link-text {
  border-bottom: 7px solid red;
  padding-bottom: 7px;
}

/* 激活状态的导航链接下边框改为橙色 */
.main-navigation-link.active .main-navigation-link-text {
  border-bottom: 7px solid #F18000;
  color: #F18000;
}

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