Bootstrap row not occupying 100% width

Question

I have a bootstrap grid layout but the row is not occupying 100% width. I am using Bootstrap 4 alpha 6. Here is the HTML:

<div class="container-fluid">
  <h1 class="center-text"  id="heading">[Enter Heaading Here]</h1>
  <div class="container">
    <div height="100px" class="row border-show">
      <div class="col-4" id="one"></div>
      <div class="col-4" id="two"></div>
      <div class="col-4" id="three"></div>
    </div>
  </div>
</div>

Here is the CSS:

.center-text{
  text-align: center;
}
#heading{
  padding: 60px;
}
.border-show{
  border-style: solid;
  border-color: black;
}

Answer 1

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!

Answer 2

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