Here is a link to my demonstration on JSFiddle: https://jsfiddle.net/nbd2w3zb/
I am working with Bootstrap 3 and have created 2 equal-sized columns (.col-md-4) within a .row.
The desired effect is to center both of these columns inside the .row, ensuring there is an equal amount of space on each side - to the left of "Column A" and to the right of "Column B".
In addition, it's important that there is some space between "Column A" and "Column B", as illustrated in the screenshot - I do not want the borders to touch.
Despite trying to use offsets, I am unable to achieve this desired result. No matter what adjustments I make, the spacing remains uneven and the columns are off-center. Here's how it looks currently: https://i.sstatic.net/1RXue.png
I have come across a suggestion in a post on Stack Overflow (Bootstrap: two column centered) where the accepted answer involves inserting empty div tags to add up to 12 columns. However, this approach does not seem ideal to me. Another solution mentioned using offsets, but I have struggled to make it work regardless of which numbers I try.
I believe that achieving this alignment should be possible in Bootstrap. Can anyone point out where I might be making a mistake?