Bootstrap making columns vertical instead of horizontal - html

Question

I'm trying to set up my website with an image, then under that image there will be two SVG files and two Bootstrap-style grids each containing one table of information. However, Bootstrap seems to be making them orient vertically instead of horizontally. You can see the end result here if you scroll to the bottom. As you'll see, the Population by Gender and Household and Family tables are one after another vertically instead of horizontally, as I want them to be. Please do note before voting to close this for duplicate that there are other problems similar to this one, but I've tried the solutions in them and they didn't work.
I've included code of the relevant portion of the HTML, it's a bit of a mess but as you can see the <div class="col-xl-6"> tags that Bootstrap uses are around the two tables, yet they still show up vertically. How come?
<div class="container-fluid">
<svg>HUGE SVG LINK REMOVED</svg>
<svg>2ND HUGE SVG LINK REMOVED</svg>
<div class="row">
<div class="col-xl-6">
<h3>Population by Gender</h3>
<div>Male: 627 (44.91%, )</div>
<div>Females: 769 (55.09%, )</div>
<br>
<table cellpadding="0">
<tr>
<td align="center">Block Group 970500-1</td>
<td>
<div>Male: 44.91%</div>
<div> Female: 55.09%</div>
</td>
</tr>
<tr>
<td align="center">New York</td>
<td>
<div id="pt" >Male: 48.39%</div>
Female: 51.61%
</td>
</tr>
<tr></tr>
</table>
<p class="small">*Based on 2010 data.</p>
</div>
<div class="col-xl-6">
<a name="HouseholdandFamily"></a>
<h3>Household and Family</h3>
<table class="tbb tbright" cellpadding="20">
<tr bgcolor="#eeeeee">
<td> </td>
<td><b>Block Group 970500-1</b></td>
</tr>
<tr>
<td>Total Households</td>
<td>548</td>
</tr>
<tr bgcolor="#eeeeee">
<td>Average Household Size</td>
<td>2.31,</td>
</tr>
<tr>
<td>1 Person Households</td>
<td>185, 33.76%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>2 or More Person Households</td>
<td>363, 66.24%, </td>
</tr>
<tr>
<td>Family Households (Families)</td>
<td>321, 58.58%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>Average Family Size</td>
<td>2.98, </td>
</tr>
<tr>
<td>Married-Couple Family</td>
<td>221, 40.33%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>Nonfamily Households</td>
<td>227, 41.42%, </td>
</tr>
</table>
</div>
</div>

Answer 1

You're using <div class="col-xl-6">, that means this div would take 6 columns on extra large displays, but it will take full width on anything smaller.
So, you probably need to use something smaller like this:
<div class="col-md-6"></div>
or
<div class="col-lg-6"></div>

Answer 2

For 'Population by Gender' box: move <table> into <div> element.
For each of div element set class col-xs-6 col-md-6.
Here you can find examples: http://getbootstrap.com/examples/grid/