Page in question: /

I just want the two columns to be centered in the page (but the text left-aligned still). I would prefer to use the columns block over the html one, but the only suggestions that I've found so far (with results close to what I want) involve the html block. I am currently using the below code to achieve what you see:

    <h2><div style="position: relative; width: 700px; margin: 0px auto;">
<div style="float: left; width: 310px; margin-right: 80px;">
<a style="color:#000000" href="tel:+1-250-295-0766"><i class="icon-phone" style="margin: 7px 7px 0;color: #990000"></i> (1)-250-295-0766</a><br>
<a style="color:#000000" href="mailto:[email protected]"><i class="icon-envelope" style="margin: 7px 7px 0;color: #990000"></i> [email protected]</a>
</div>
<div style="float: left; width: 310px;">
Princeton, BC <br>
PO Box 1054
</div>
</div>
</h2>

Which looks ok on desktop, although still not quite as centered as I'd like (which I imagine I can fix by playing around with the widths and margins more), but on mobile the entire second column is off the page on the right side - not what I was after lol.

How can I fix this? Or better yet, is there an easier way to center columns using the blocks?