Flexbox Paddings (occupy More Than 100% Width)

I'm working with @c4rlosls, we have 2 issues: https://imgur.com/a/PTF7ako If container-fluid father has px-0, it occupies more than 100% width. And .cont2 a and .cont3 a haven't g

Solution 1:

In this you have to do below changes in your code to solve issue.

<div class="container-fluid px-0 "> 
  <divclass="row no-gutters"><divclass=" col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column"><ahref="google.uno"class="w-100"><h1class="">Title</h1><span>Lorem ipsum dolor sit amet</span></a></div><divclass="container-fluid col-xl-4 col-lg-12 "><divclass="row no-gutters"><divclass=" col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column"><ahref="google.uno"class="w-100"><h1class="">Title2</h1><span>Lorem ipsum dolor sit amet</span></a></div><divclass="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column"><ahref="google.uno"class="w-100"><h1class="">Title3</h1><span>Lorem ipsum dolor sit amet</span></a></div></div></div></div>

In above code i have added "no-gutters" in row after col-xl-4 which solve scrollbar problem... And i have remove <div class=row> from 2nd column(inew2,inew3) which solve your title background issue..

Solution 2:

i made a template for you. you can use this.

body {
  margin:0;
  padding:0;
}

.flex {
  display:flex;
  width:100%;
}
.col1 {
  flex:3;
  height:500px;
}
.col2 {
  flex:2;
  display:flex;
  flex-direction:column;
  height:500px;
}

.bg {
  background:url("https://picsum.photos/800/600");
  width:100%;
  height:100%;
  position:relative;
}

.bg2 {
  background:url("https://picsum.photos/600/800");
  width:100%;
  height:100%;
  flex:1;
  position:relative;
}

.bg3 {
  background:url("https://picsum.photos/500/400");
  width:100%;
  height:100%;
  flex:1;
  position:relative;
}

.text_area {
  box-sizing:border-box;
  height:70px;
  padding:20px;
  background:rgba(0,0,0,.7);
  width:100%;
  display:flex;
  flex-direction:column;
  position:absolute;
  bottom:0;
  left:0;
  justify-content:center;
}

.text_area.title {
  color:#fff;
  font-weight:600;
  font-size:28px;
  font-family:sans-serif;
}

.text_area.description {
  color:#fff;
  font-weight:400;
  font-size:12px;
  font-family:sans-serif;
}

@media screen and (max-width:728px){
  .flex {
    flex-direction:column;
  }
  .col1 {
    height:250px;
  }
}

<divclass="flex"><divclass="col1"><divclass="bg"><divclass="text_area"><divclass="title">Title</div><divclass="description">Lorem ipsum dolor sit amet</div></div></div></div><divclass="col2"><divclass="bg2"><divclass="text_area"><divclass="title">Title</div><divclass="description">Lorem ipsum dolor sit amet</div></div></div><divclass="bg3"><divclass="text_area"><divclass="title">Title</div><divclass="description">Lorem ipsum dolor sit amet</div></div></div></div></div>