col-md-11 with nothing in the remaining 1 - html

Question

How do I fill the first 11 columns with a table, but then have the last 1 column be empty?
Right now my HTML is throwing my <h4> after my <div class='col-md-11' to the right of it just squishing it into the page
my HTML:
<nav class='page_element'>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<br>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<hr>
</nav>
<nav class='page_element'>
<div class="table-responsive col-md-11">
</div>
<h4><strong>Question 3</strong></h4>
....

Answer 1

This all got worked out in comments, but here's an answer for good measure.
The Bootstrap classes for col-x-n really aren't meant to be used as standalone classes. They work, sometimes, but, in part because they depend on a styling of float: left, they can have some funky behavior when paired with non-col-x-n classes. It's best, whenever possible, to wrap them in rows.
In that ideal situation, it would look something like this:
<nav class='page_element'>
<div class="row">
<div class="table-responsive col-md-11">
...
</div>
</div>
<h4><strong>Question 3</strong></h4>
</nav>
If that isn't, for one reason or another, a good option, I would suggest against using those classes at all. Particularly in a situation like this, they give you a lot of functionality that you don't need, or even want, like the ability to have two columns sit next to each other.
In that case, I would suggest (and I was about to, but then my computer battery died and you beat me to it) using a good-ol'-fashioned width: x%. It's always nice to bring that kind of design implementation out from your HTML and into a CSS file, but for the sake of simplicity, a style attribute does the same thing.
<nav class='page_element'>
<div class="table-responsive" style="width: 92%">
...
</div>
<h4><strong>Question 3</strong></h4>
</nav>
I picked 92% because that's approximately 11/12, which is what col-md-11 aims for.