How to center entire columns on a page, and have it stay responsive?
Page in question: https://princetonfireandsafety.com/contact-info/
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@example.com"><i class="icon-envelope" style="margin: 7px 7px 0;color: #990000"></i> firstname.lastname@example.org</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?