Frustrated with 3 column layout

I just finished with all the formatting for a chess book for kindle. For the main chess notation in the book, I created a three column CSS/HTML. I package it all together in an epub from the command line and then create the mobi/kf8 using kindlegen.

I submit it through KDP, and once done, I download the mobi file that the KDP setup offers so that you can upload onto your kindle devices to ensure it looks correct. And it does. I have a kindle fire 10, a kindle fire 7, a kindle paperwhite, a mobile phone, and the kindle previewer software. On all five, the columns look perfect (see screenshot below). However, the columns look off on the KDP online previewer, but I figured since I downloaded the source file and uploaded into all kindle devices directly, that it was fine. Last night, I submitted the file for publication. Today, I view the look inside, and it too looks perfect. I'm pretty satisfied, except I decided to download a "sample preview," and low and behold, the columns are way off just like the online previewer.

I unpublished immediately, and I feel awful because one person bought the book in the short period after it went live and before I could unpublish. I am very frustrated at this point and I am looking for any advice.

Here is the HTML I'm using for the columns.

<div class="container">
<div class="column-left"> 6 </div>
<div class="column-center"> e5+ </div>
<div class="column-right"> <span class="b">K</span>e6 </div>
</div>


and the CSS:

.column-left{ float: left; width: 7%; margin-left: 30%; font-weight: bold;}
.column-right{ float: right; width: 15%; margin-right: 20%; font-weight: bold; }
.column-center{ display: inline-block; width: 15%; padding-left: 5%; font-weight: bold;}

Here are the screenshots. The top screenshot is of the downloaded file from the KDP setup process (looks perfect), and the bottom screenshot is from the actual file you receive when buying/sampling.

Thank you
Steven