使用Next.js+React开发时导航栏无法占满100%宽度如何解决？

问题原因及解决方法 #

导致导航栏无法占满全屏的常见原因有3个，按优先级排查修改即可：

1. 未重置浏览器默认样式
   浏览器默认会给<body>等标签自带8px的外边距，同时未设置box-sizing: border-box时，导航栏的左右padding会把元素总宽度撑出屏幕，出现横向滚动条或者宽度不足的问题。
   你可以在项目的全局样式文件中添加以下重置规则：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 导航栏未显式指定宽度
   虽然块级元素默认宽度为100%，但在CSS Modules或者嵌套flex布局场景下可能出现宽度计算异常，在你的.navbar类中添加宽度规则即可：

.navbar {
  color: $color-navbar-text;
  height: 60px;
  width: 100%; /* 新增：指定宽度占满父容器 */
  box-sizing: border-box; /* 新增：确保左右padding不会撑宽元素，总宽度维持100% */
  display: flex;
  padding: 0px 7.5%;
  background: $color-navbar-background;
  align-items: center;
  justify-content: space-between;
  /* 剩余原有样式保持不变 */
}

3. 父容器宽度限制
   如果你把Navbar组件放在了设置了固定宽度、最大宽度或者左右外边距的外层布局容器里（比如很多项目默认内容区会加max-width: 1200px; margin: 0 auto的居中规则），只需要把Navbar组件移动到这个带宽度限制的容器外部，放在最外层的布局节点下即可。
   如果导航栏的父元素是flex布局容器，额外给.navbar加flex-shrink: 0规则避免被挤压即可。

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