Bootstrap row not occupying 100% width

In case someone else comes across this and the answer doesn't solve their problem, my issue that was causing this was because I didn't realize I was adding a row and trying to set up columns in a Bootstrap navbar. navbar already has a grid-like system in it by default, so it seems you are pushing it over the edge if you try to add columns inside of it. They aren't necessary anyway.

So if this answer doesn't solve your problem, check to see if you are inside of another Bootstrap component that already handles spacing. You may be trying to double-delimit your content!

Remove it from the container. The container is not 100% width, and shouldn't be nested in another container.

The container class has this effect.

<div class="container">
    <div class="row">
        <div class="col-12">
            div into <b>container</b> class
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            div into <b>container-fluid</b> class
        </div>
    </div>
</div>

This code will generate following image: