如何实现header背景色占满100%宽度且navbar内容宽度保持70%

问题原因 #

• 你当前把导航栏背景色设置在了宽度仅为70%的.navbar元素上，自然无法铺满全宽
• .navbar设置了position: fixed脱离文档流，父级header没有被撑开，即使给header加背景色也无法和固定的导航栏同步滚动

解决方案 #

仅修改CSS代码即可，HTML无需调整，修改后的CSS如下：

body {
    background-color: black;
    /* 规避固定导航栏遮挡页面主体内容，数值可根据导航栏实际高度调整 */
    padding-top: 50px;
    /* 清除body默认外边距，避免出现横向滚动条 */
    margin: 0;
}

header {
    /* 固定定位移到header层，实现整栏固定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 背景色移到header层，实现全宽覆盖 */
    background: #1a1c1b;
    padding: 5px 0;
    display: flex;
    justify-content: center;
    /* 提高层级避免被其他页面元素遮挡 */
    z-index: 999;
}

.navbar, main {
    width: 70%;
}

.navbar {
    /* 原有导航栏的固定、背景、内边距都已移到header，直接删除即可 */
    /* 新增flex布局实现内部元素横向排列对齐，可根据实际需求调整 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

改动说明 #

1. 将固定定位、背景色、内边距从.navbar迁移到header上，同时给header设置100%宽度，实现背景色全宽覆盖
2. 给body添加上内边距，避免固定导航栏遮挡页面下方内容
3. 给.navbar添加flex布局属性，实现内部logo、搜索框、导航链接的横向均匀排列，符合常规导航栏的交互逻辑

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