如何单独设置导航栏(navbar)与其他HTML元素样式？样式冲突求助

核心问题分析 #

• 导航栏出现白边：浏览器默认给<body>设置了margin，导致导航栏无法铺满视口边缘。
• 布局混乱：未重置全局默认样式，且导航栏内的浮动元素可能干扰后续布局，同时主体容器的固定宽度和边距设置未适配视口逻辑。

修正后的CSS代码 #

/* 重置全局默认样式，消除浏览器自带的margin/padding影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: Arial, Helvetica, sans-serif;
}

nav{
  background: #5a5a5a;
  height: 80px;
  width: 100%;
  box-sizing: border-box;
  /* 确保导航栏不会被主体内容遮挡 */
  position: relative;
  z-index: 100;
}

label.logo{
  color: white;
  font-size: 26px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: capitalize;
  text-decoration: none;
}

.containerA {
  background: #fff;
  display:flex;
  width: 900px;
  align-items: center;
  margin: 30px auto; /* 改为水平居中，避免固定边距导致小屏幕溢出 */
  padding: 0 20px; /* 统一内边距，避免单侧padding失衡 */
}

#containerB {
  background: #fff;
  display: block; /* 替换inline-block为block，符合块级容器逻辑 */
  width: 900px;
  text-align: center;
  margin: 30px auto; /* 水平居中 */
  padding: 0 20px;
}

关键修改说明 #

• 全局样式重置：用*选择器清除所有元素默认的margin和padding，统一设置box-sizing: border-box，确保内边距和边框不会撑开元素宽度，从根源解决布局计算混乱。
• 导航栏优化：移除无效样式，确保width:100%完全铺满视口，设置z-index防止被主体内容遮挡。
• 主体容器调整：将固定左右边距改为margin: 30px auto实现水平居中，避免小屏幕下布局溢出；调整display属性为更合理的block，统一内边距规则。

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