看你给出的代码结构，问题主要出在Bootstrap默认的容器内边距、导航栏默认样式，以及嵌套导航的结构冲突上。下面是一步步的修复方案：

1. 移除容器的左右内边距 #

Bootstrap的.container-fluid默认自带padding-left:15px和padding-right:15px，这会导致导航栏背景色无法铺满屏幕两侧。你可以通过以下方式覆盖：

/* 方法1：直接修改导航栏内的container-fluid样式，不影响全局 */
.navbar .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* 方法2：给容器加自定义类，避免干扰其他页面的container-fluid */
.full-width-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

如果用方法2，记得把HTML里的<div class="container-fluid">改成<div class="container-fluid full-width-container">

2. 确保最外层导航栏无宽度限制 #

检查最外层的.navbar-fixed-top，确保它的宽度是100%，且没有默认外边距：

.navbar-fixed-top {
  width: 100%;
  margin: 0; /* 移除可能存在的上下外边距 */
}

3. 优化嵌套导航的结构 #

你代码里嵌套了两个<nav>标签（.navbar-default和.navbar-inverse），这很容易导致样式冲突。建议简化结构，把品牌和导航菜单放在同一个导航栏内：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid full-width-container">
    <div class="navbar-header">
      <span class="navbar-brand">Brand Here</span>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <!-- 你的导航菜单<ul class="nav...">放在这里 -->
  </div>
</nav>

4. 设置导航栏背景色 #

最后直接给最外层导航栏设置背景色，就能确保颜色铺满整个宽度了：

.navbar-inverse {
  background-color: #2c3e50; /* 替换成你想要的颜色值 */
}

如果还是有问题，检查一下是否有父元素设置了max-width或overflow:hidden，这些属性也会限制导航栏的宽度。

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