Can you explain why inew2 and inew3 do not have a width of 100% of their parent div? https://i.sstatic.net/a4GEa.jpg
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.ibrands{
height: 120px;
background-color: blue;
}
@media only screen and (min-width: 992px) {
.navbar {
height: 80px;
}
.inew1{
height: 720px;
background: red;
}
.inew2{
height: 360px;
background: yellow;
width: 100%;
}
.inew3{
height: 360px;
}
.ibrands a{
margin-left: 20px;
margin-right: 20px;
}
} <div class="container-fluid">
<div class="row">
<div class="col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column">
<h1 class="">Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veritatis repudiandae unde, placeat iste eaque omnis necessitatibus, ratione, distinctio laboriosam rem, at porro aut saepe quia. Voluptas dicta alias, molestiae!</p>
</div>
<div class="col-xl-4 col-lg-12">
<div class="col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column">
<h1 class="">Title2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolores accusantium, eius inventore nemo molestiae dolore ex voluptates et aut incidunt eligendi vel asperiores maxime soluta tenetur id exercitationem magnam!</p>
</div>
<div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">
<h1 class="">Title3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolores accusantium, eius inventore nemo molestiae dolore ex voluptates et aut incidunt eligendi vel asperiores maxime soluta tenetur id exercitationem magnam!</p>
</div>
</div>
</div;
<div class="row ibrands">
<div class="col-12 d-flex justify-content-center align-items-center ">
<a href="" class="">a</a>
<a href="" class="">b</a>
<a href="" class="">c</a>
</div>
</div>
</div>