如何实现Bootstrap col溢出容器满宽显示且保持元素相对定位

现有实现代码 #

HTML部分 #

<nav class="hhc-navbar-noshadow  navMasterPageAgency">
    <div class="container container-nav-master-page-agency ">
        <div class="row w-100 align-items-center" >
            <div class="row col-12">
                <div class="col-1" style="min-width:120px;max-width:120px;width:120px"></div>
                <div class="col-8 d-flex align-items-center nav-master-page-agency-links">
                    <a  class="item-menu-famille-metier f1"  href="#" >Link1</a>
                    <a  class="item-menu-famille-metier f2"  href="#" >Link2</a>
                    <a  class="item-menu-famille-metier f3"  href="#" >Link3</a>
                </div>
            </div>
                     
            <div class="row col-lg-1 col-xl-2 pageNameTitle">
                    <div class="logo-ma-team accueil" >
                        <img src="unsplash.it/450/150" />
                    </div>
            </div>
        </div>
    </div>
</nav>

CSS部分 #

.navMasterPageAgency {
    background: #F6F8FF 0% 0% no-repeat padding-box;
    width: 100% !important;
    height: 130px
}
.nav-master-page-agency-links {
    background: #FFF 0% 0% no-repeat padding-box !important;
    height: 40px;
}

实现目标 #

• 类名为nav-master-page-agency-links的导航链接区块固定在导航顶部，设置#FFF白色背景，背景需铺满整个浏览器视口宽度
• 导航剩余区域位于链接区块下方，使用#F6F8FF作为背景色
• 链接区块与logo-ma-team accueil类的logo元素保持原有相对位置，页面其他使用普通container类的内容需与logo对齐

当前问题 #

nav-master-page-agency-links区块被嵌套在固定宽度的container容器内部，自身宽度受容器限制，无法实现满屏宽度的白色背景效果。如果直接将容器替换为container-fluid实现满宽，会导致页面其余使用普通container的内容无法和logo对齐，布局不符合预期。
异常效果参考图

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