0

Im new with flexbox, im using bootstrap 4 and i have and issue. https://i.stack.imgur.com/oKZ8V.jpg The flexbox has a margin left and right, how can i remove it? I want that .cont1 have 100% of his parent width?

.cont1{
 background-color: red;
    height: 100%; 
}

@media only screen and (min-width: 992px) {

.cont1 a{
    background-color: rgb(0,0,0,0.5);

}
.cont1 h1{
 font-size: 50px;
}
.cont1 span{
 font-size: 20px;
}

}
 
 
 <div class="container-fluid"> 
      <div class="row">
          <div class=" col-xl-8 col-lg-12 cont1 d-flex justify-content-end align-items-start flex-column">
           

           
           <a href="" class="w-100">
              <h1 class="">Title</h1>
              <span>Lorem ipsum dolor sit amet</span>
            </a>
          </div>
      </div>
 </div>
 
 
 
 
 
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
c4rlosls
  • 65
  • 9
  • It looks like you mean the Bootstrap "gutter" which is created with padding. Use `no-gutters` on the `row`, and `px-0` on the container to remove both the col and container padding. https://www.codeply.com/go/yVloiwyi0E – Carol Skelly Dec 16 '18 at 13:47
  • 1
    I wont to have 100% width, sorry 4 not clear it up in post (look title). @Zim ty bro, now works <3 – c4rlosls Dec 16 '18 at 13:51
  • @Zim If i use px-0, i fix the last error, but i have a new: https://jsfiddle.net/h0xr6L28/3/ https://imgur.com/a/PTF7ako, i have a scroll down (container-fluid is more than 100%) and `.cont2 a` and `.cont3 a` arent 100% width, i dont understand why – c4rlosls Dec 16 '18 at 16:08
  • It looks like this has already been asked here: https://stackoverflow.com/questions/53804331/flexbox-paddings-occupy-more-than-100-width – Carol Skelly Dec 16 '18 at 17:03

0 Answers0