Bootstrap Columns are not appearing side-by-side no matter what I try - css

Question

I have the following code:
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>
No matter what I do, the result is the second column appears directly below the other.
The Margin - 100% and it shouldn't be.
I used the following https://getbootstrap.com/docs/4.1/layout/grid/#equal-width for reference.
I've been doing web development for over 35 yrs and this, so very simple, is kicking me.
This code lives inside an article tag. It's not full width of the page but a piece of it.
"NOTE: Ignore the DJ equipment. That picture will be replaced"
Here's the section that holds the box:
<!-- Main -->
<div id="main" class="site-main container_12">
<!-- Left column -->
<div id="primary" class="grid_8">
<!-- About Us -->
<article class="single-post">
<header class="entry-header grad1">
<h1 id="equipTitle" class="entry-title">Welcome to our Magic Shop</h1>
<div class="clear"></div>
</header>
<div class="entry-content">
<br>
<!-- Magic Page 1 -->
<div id="magic1" class="entry-content-post equip-box-1">
<h3><strong>Card Magic Overview</strong></h3>
<p class="mainptext">Card manipulation is the branch of magic that deals with creating effects using sleight of hand techniques involving playing cards. Card manipulation is often used in magical performances, especially in close-up, parlor,
and street magic. This is how I learned.</p>
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>
<p class="mainptextnext">Click NEXT to continue...</p>
<div class="grid_4 margin-bottom slider-arrow arrow-box-1">
<a class="prevslidee load-item" onclick="funcs.goLeft('magic1','magic0')">Prev</a>
<a class="nextslidee load-item" onclick="funcs.goRight('magic1','magic2')">Next</a>
</div>
....
Thoughts?
UPDATE: This is what I see in the DEV console
Then the console log:

Answer 1

I just copy and paste your html elements and its working fine I using Bootstrap Version 4.1.3 as CDN.
I think override style on columns so need to find which style is override from Inspect Element.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>