Make bootstrap col overflow container

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>