Bootstrap 3 Adding a container-fluid inside a container?

You cannot use .container-fluid inside of a .container and get what you're trying to achieve. Look at the code for Bootstrap's .container class; it has a fixed width.

You need to use .container-fluid OUTSIDE of the fixed-width container.

An example is below:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>Some Content</p>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <p>Item 1</p>
        </div>

        <div class="col-md-4">
            <p>Item 2</p>
        </div>

        <div class="col-md-4">
            <p>Item 3</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>Some More Content</p>
        </div>
    </div>
</div>

It's perfectly acceptable to have multiple containers throughout the site, wherever you need to make use of a Bootstrap Grid.

.full-width {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="container-fluid full-width">
  </div>
</div>

This works because you are using vw - vertical-width which equals enduser's desktop width. This overrides % because a % is the percentage of a parent, vh uses the desktop.