Grid with container-fluid and container in Bootstrap 3 - html

Question

I have been using html/css for a while now. And I have never ran into this kind of grid problem with Bootstrap 3. I am trying to find a way to combine a 50% width (inside a <div class="container-fluid">) with a 50% width div (inside a <div class="container">). Like the grid in the following picture:
Example of the template
Yellow overlay: <div class="container"></div>
The problem is that they won't work together cause of the widths.
So how do I simulate this?
<section>
<div class="container-fluid">
<div class="col-sm-12 col-md-6 no-padding"></div>
<div class="container">
<p>content</p>
</div>
</div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
</div>
</section>

Answer 1

If I'm understanding what you're trying to achieve, there are a couple of problems. Firstly, you still need a row div to wrap the columns, which is in turn nested in the container. Also, by default, the container would have some padding, so that would need to be removed with some basic CSS as well.
Here is the HTML structure
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" id="left">
Left Side
</div>
<div class="col-lg-6" id="right">
Right Side
</div>
</div>
</div>
Also, here's a live example you can play with: http://www.bootply.com/MKe7aJwKuc
Let me know if I missed the mark on what you're trying to do and I can try to rework it and help you out.

Answer 2

Should be this schema
<section>
<div class="container-fluid">
<div class="col-sm-12 col-md-6 no-padding"></div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
<div class="container">
<div class= "row">
<div class="col-sm-12 col-md-6 no-padding">Content</div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
</div>
</div>
</div>
</section>

Answer 3

on Bootstrap 4
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="elem left">Left Side</div>
</div>
<div class="col-lg-6">
<div class="elem right">Right Side</div>
</div>
</div>
</div>
sass
#mixin fluidwidth($widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
width: calc(100% + ((100vw - #{$container-max-width})/2) );
}
}
}
.elem.right{#include fluidwidth;}