Baptiste Arnaud Baptiste Arnaud - 6 months ago 24
HTML Question

Bootstrap row in a row gives me a tiny white right margin

in bootstrap, it seems that nested rows gives me a small additionnal right margin like this:

enter image description here

by definition a row is :

margin-right : -15px;
margin-left : -15px;


my row are contained in a container-fluid to have the full window width.

Do you have any idea how to get rid of this white space on the right ?

For instance :

<div class="row">
<div class="customize">
<div class="row">
<div style="display:flex; margin-top:50px;">
<h2 class="slide-title">Personnalisez votre vitrine CINETIK</h2>
</div>
</div>


the first row when i highlight it has the the exact size of the window and the second one has this margin on the right.
The first row is contained in a fluid container.

The white space has a fixed dimension, it is still the same size when a resize the window.

Answer

Use class=col-md-12 like this:

<div class="row">
<div class="customize">
    <div class="row">
        <div class="col-md-12" style="display:flex; margin-top:50px;">
            <h2 class="slide-title">Personnalisez votre vitrine CINETIK</h2>
        </div>
    </div>