How to center a 2 column grid in a row?

Might be easy but how can I get a 2 column layout “centring” in a row?

<div class="row teaser_home_page">
 <div class="large-6 small-12 medium-6 columns">
 <div class="large-6 small-12 medium-6 columns">

I have a 3 columns row. Which is ok. Now I need to have a 2 columns row to sit under it. The client want it to center under the 3 column. The width per column (img width will be the same as the 3 column columns.

I tried to apply <row align-center which did not have any effect.
Then I applied < large-offset-2 > which is ok for the first column, but kicking the second to the next row.
So that is not ok.
Is there a better approach? how to get this done?

made a pen for who is willing to try and help me. Thanks.

Add end to the final column:

large-4 small-12 medium-6 columns end

@iamrobert Great that works. Thanks :slight_smile: