"Splitting" a <div></div> cell cause some unwanted cells appear if border activated.

[notalentgeek]

So I have this.

28.png

As you can see there are some unwanted red block below the <div></div>. But if the background and the border turned off it is fine like this.

image.png

The 2 middle cells are made from splitting a 6/12 cell. Here is the code of me splitting the 6/12 cell.

<div class="row">
    <div class="clearfix col-md-3">
        <h3>Lowercase.</h3>
        <p class="text-lowercase">
            Lorem ipsum dolor ... consequat.
        </p>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">
                <h3>Uppercase.</h3>
                <p class="text-uppercase">
                    Lorem ipsum dolor ... consequat.
                </p>
            </div>
            <div class="col-md-6">
                <h3>Capitalize.</h3>
                <p class="text-capitalize">
                    Lorem ipsum dolor ... consequat.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <h3>Strong and italic.</h3>
        <p>
            <strong>Lorem ipsum</strong> dolor ... <em>consequat</em>.
        </p>
    </div>
</div>

I want to have my <div></div> tag to have solid border. How can I remove the unwanted red cells?