如何消除section元素右侧边距？导航栏全屏适配问题求助

你的问题根源在于未正确重置浏览器默认样式，加上CSS语法错误与盒模型处理不当，导致右侧留白无法消除。以下是具体修复步骤：

1. 清除浏览器默认样式 #

浏览器默认会给body设置margin: 8px，这是你需要用负margin抵消的核心原因，直接清除即可，无需使用负margin这类hack手段：

body {
  margin: 0;
  padding: 0;
}

2. 修复CSS语法错误 #

你的.publicnavbarwrap中，box-shadow: 5px 5px 5px;后单独写#FFF;属于无效代码，阴影颜色应整合到box-shadow属性内：

box-shadow: 5px 5px 5px #FFF;

3. 全局应用正确盒模型 #

给所有元素设置box-sizing: border-box，避免width:100%时因padding或border导致宽度溢出：

* {
  box-sizing: border-box;
}

4. 简化导航栏样式 #

无需设置负margin，直接让导航栏占满宽度（块级元素默认即可占满，也可显式设置width:100%），同时清除自身margin和padding。

修正后的完整代码 #

* {
  box-sizing: border-box;
}

body {
  font-family: Quicksand, verdana;
  background-color: #000000;
  margin: 0;
  padding: 0;
  background-image: url(../images/background.jpg);
  background-size: cover;
}

.publicnavbarwrap {
  width: 100%;
  background-color: #CCC;
  box-shadow: 5px 5px 5px #FFF;
}

<section class="publicnavbarwrap">
  <div id="public_nav_bar">
    Nav content
  </div>
</section>

调整后，导航栏会完全贴合浏览器顶部及左右边缘，无任何留白。

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