Check out this code snippet:
<div class="mainptext">
<h3><strong>Master 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>I'm having trouble getting the second column to align correctly beside the first.
The margin should not be set to 100%.
I referred to https://getbootstrap.com/docs/4.1/layout/grid/#equal-width for guidance.
Despite my 35 years of web development experience, I can't seem to solve this simple issue.
https://i.sstatic.net/ZwDgx.jpg
This code is contained within an article tag and is not intended to span the full width of the page. "NOTE: Ignore the DJ equipment. That picture will be replaced" https://i.sstatic.net/nG8or.jpg
Here's where the problematic section is located:
<!-- 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>
....
Any suggestions?
UPDATE: Here are images from the DEV console: https://i.sstatic.net/0tuuI.jpg And the console log: https://i.sstatic.net/wxkq5.png