Bootstrap Modal not greying out 100% - html

Question

Trying to get a Bootstrap Modal to grey out the background when clicked. It works great but the left sidebar does not grey out. Any idea of why?
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>Customers</li>
<li>Company</li>
</ul>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">
New company
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add company</h4>
</div>
<div class="modal-body">
{% from "_formhelpers.html" import render_field %}
<form action="/company/create" method="POST">
<div class="form-group">
{{ render_field(form.name, class="form-control") }}
</div>
{{ error }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-md" data-toggle="modal" data-target="#myNewModal">
New customer
</button>
<!-- Modal -->
<div class="modal fade" id="myNewModal" tabindex="-1" role="dialog" aria-labelledby="myNewModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add customer</h4>
</div>
<div class="modal-body">
{% from "_formhelpers.html" import render_field %}
<form action="/customer/create" method="POST">
<div class="form-group">
{{ render_field(forms.name, class="form-control") }}
</div>
<div class="form-group">
{{ render_field(forms.email, class="form-control") }}
</div>
<div class="form-group">
{{ render_field(forms.summary, class="form-control") }}
</div>
<div class="form-group">
{{ render_field(forms.purpose, cols="100", rows="10", class="form-control") }}
</div>
<div class="form-group">
{{ render_field(forms.company, class="form-control") }}
</div>
{{ error }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<h2 class="sub-header">Customers</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Company</th>
</tr>
</thead>
{% for customer in customers %}
<tbody>
<tr>
<td>{{ customer.id }}</td>
<td>{{ customer.name }}</td>
<td>{{ customer.company.name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
It's a Flask application on local. Let me know if I can provide more information.
Thanks