当为子元素设置边框（border）时，若未指定 `box-sizing: border-box`，浏览器默认按 `content-box` 计算宽高，导致边框额外增加尺寸，使元素实际宽度/高度超出父容器边界。
在你的 Sass 代码中，.nav-content 设置了 width: 60% 和 border: 1px solid red，但未声明盒模型类型。根据 CSS 默认行为（box-sizing: content-box），该元素的总宽度 = 内容宽度（60%） + 左右 border（2px） + 内边距（0），因此实际宽度超过父容器 .navigation-view 的 60%，造成视觉上“边框溢出”的现象——尤其在固定高度、精确布局的导航栏中尤为明显。
✅ 正确做法是统一启用 border-box 盒模型，让 width 和 height 值包含 content、padding 和 border，从而确保尺寸可控：
// navigation.sass
*
box-sizing: border-box
$nav-bar-height: 50px
$nav-bar-link-color: white
body
margin: 0
padding: 0
div.navigation-view
background-color: black
height: $nav-bar-height
width: 100vw
position: fixed
top: 0
div.nav-content
display: inline-block
height: 100%
width: 60%
border: 1px solid red
// ✅ 现在 width: 60% 已包含 border，不再溢出? 注意事项：
- 使用 * { box-sizing: border-box } 是业界广泛推荐的重置方式，可避免多数布局失真问题；
- 若需兼容极老浏览器（如 IE7 及更早），需注意 box-sizing 的前缀支持（现代项目通常无需）；
- max-height: 100% !important 在此场景中非必需，因 height: 100% 已明确继承父高，且 border-box 下不会因 border 导致高度超限；
- 对于 inline-block 元素，还需留意空白符（换行/空格）引发的间隙问题，必要时可设置父容器 font-size: 0 或使用 Flex 布局替代。
✅ 推荐进阶优化：将 .nav-content 改为 Flex 子项，提升响应性与对齐控制：
立即学习“前端免费学习笔记（深入）”；
div.navigation-view
display: flex
align-items: center
// ...其余样式
div.nav-content
flex: 0 0 60% // 不伸缩、不收缩、基准宽度60%
border: 1px solid red统一 box-sizing: border-box 是构建可靠、可预测 CSS 布局的基石之一。一次配置，全局受益。
