Trying to center a nested column in zurb foundation
<div class="container">

        <div class="row">
            <div class="12 columns">
                <div class="row">
                    <div class="4 centered columns">
                        <h1>My Content</h1>
                    </div>
        </div>

            </div>
        </div>
</div>