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

Question

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

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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

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

Sign up