Bootstrap max-width columns responsive

Question

I am trying to code a section of a one-page responsive Bootstrap design that has two side-by-side columns of text. The designer wants these two columns to have a max-width, but once it reaches its max, it is no longer centered (as the rest of the content continues to be responsive).

Is there a way around this to still have the two columns of text centered?

Edit: Here is a link to what the code looks like: http://www.bootply.com/119539

Answer 1

Here try this Bootply. Is this what you are looking for?

<div class="row">
    <div class="col-lg-12">
            <h2 class="center-block">How We Work</h2>

    </div>
    <div class="col-lg-4 col-lg-offset-2">
        <p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
    </div>
    <div class="col-lg-4">
        <p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
    </div>
</div>

---

h2.center-block{
    text-align:center;
}

p.text-justify{
 max-width:400px;
}

NOTE: You can use col-lg-offset-2 to shift the div by 2 columns.