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 got 100% width of their father's div.
How can I fix these 2 issues?
.inew1{
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
height: 100%;
}
.inew2{
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
height: 100%;
}
.inew3{
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
height: 100%;
}
<div class="container-fluid px-0 ">
<div class="row no-gutters">
<div class=" col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column">
<a href="google.uno" class="w-100">
<h1 class="">Title</h1>
<span>Lorem ipsum dolor sit amet</span>
</a>
</div>
<div class="container-fluid col-xl-4 col-lg-12 ">
<div class="row">
<div class=" col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column">
<div class="row">
<a href="google.uno" class="w-100">
<h1 class="">Title2</h1>
<span>Lorem ipsum dolor sit amet</span>
</a>
</div>
</div>
<div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">
<div class="row">
<a href="google.uno">
<h1 class="">Title3</h1>
<span>Lorem ipsum dolor sit amet</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
See Question&Answers more detail:os