Make bootstrap col overflow container - html

Question

So I have this code
<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>
.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;
}
The nav-master-page-agency-links should be on the top and should have #FFF background color
and the reset should be under it with another color.
The problem is the nav-master-page-agency-links is in a container and I can't make the #FFF for 100% width of the page and a the same it's position should be relative to the logo-ma-team accueil class
well I change to container-fluid it does help but the content of the reset of the page will not be aligned with the logo, because the reset of the page is in a container not container-fluid
so any idea or help? thank you

Answer 1

Based on my understanding of the question is that you are trying to align the content on the left side and make the .nav-master-page-agency-links full width of the web page.
This snippet should do the job:
Explanation:
I have just wrapped the containers inside a <div class="bg-colorName"></div> to make it 100% of the outer container which is .container-nav-master-page-agency. This will result in making the color expand the whole page and then shrink the content inside the .container.
.nav-master-page-agency-links {
height: 40px;
}
.bg-violet {
background: #F6F8FF 0% 0% no-repeat padding-box;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="hhc-navbar-noshadow navMasterPageAgency">
<div class="container-nav-master-page-agency">
<div class="bg-white">
<div class="container">
<div class="row">
<div class="col-8 d-flex justify-space-between flex-row 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 ml-3" href="#">Link2</a>
<a class="item-menu-famille-metier f3 ml-3" href="#">Link3</a>
</div>
</div>
</div>
</div>
<div class="bg-violet py-5">
<div class="container">
<div class="row col-lg-1 col-xl-2 pageNameTitle">
<div class="logo-ma-team">
<img class="img-fluid" src="https://icons-for-free.com/download-icon-placeholder-1320568685473343206_128.ico" />
</div>
</div>
</div>
</div>
</div>
</nav>