新手求助：CSS固定导航栏向左偏移出屏幕的原因是什么？

问题根源 #

固定定位（position: fixed）的导航栏往左偏移，主要是两个常见原因：

• 浏览器默认给body标签加了8px左右的外边距，导航栏设了width:100%后，会被这个外边距挤得左边缘超出视口
• 没给固定定位的导航栏显式设置left:0，浏览器默认的定位规则可能导致它没对齐视口左侧

修复步骤 #

直接修改CSS，加上几个关键属性就能搞定：

修改后的完整CSS代码 #

/* 先清除body的默认边距，避免全局布局偏移 */
body {
  margin: 0;
  padding: 0;
}

/* 导航栏样式 */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0; /* 强制导航栏左边缘对齐视口 */
  width: 100%;
  box-sizing: border-box; /* 确保内边距/边框不会撑宽导航栏 */
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  margin-top: 30px; /* 避免内容被导航栏挡住 */
}

关键修改说明 #

• body { margin:0; padding:0; }：干掉浏览器自带的默认边距，从根源消除布局偏移的诱因
• .navbar加left:0：直接把导航栏钉在视口最左侧，彻底解决左偏移问题
• box-sizing: border-box：防止后续给导航栏加内边距或边框时，宽度超出100%导致横向滚动条

改完之后导航栏就会完全贴合视口顶部和左侧，不会再偏移出屏幕了。

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