Bootstrap col-* not taking full width
<p>I have the following <strong>code:</strong></p>

<pre><code>&lt;div class="row row-space"&gt;
    &lt;div class="row" style="border: 1px solid red;"&gt;
        &lt;div class="col-lg-6" style="border: 1px solid black;"&gt;
            &lt;div class="row"&gt;
                &lt;div&gt;CHILD A&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-6" style="border: 1px solid black;"&gt;
            &lt;div class="row"&gt;
                &lt;div&gt;CHILD B&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The problem is, all <code>.row</code> divs take full width of parent outer div (as expected)
but the ones with <code>col-lg-12</code> or (<code>col-lg-6</code> + <code>col-lg-6</code>) are not taking the full width.</p>

<p><a href="https://i.stack.imgur.com/qow7H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qow7H.png" alt="enter image description here"></a></p>

<p>I am expecting the black boxes to be divided equally inside the red box. I am not applying any other styles to the HTML. </p>