Bootstrap’s center-block not working

I’m trying to use center-block to center the navigation of my WordPress template, which is using bootstrap. I’ve tried applying the center-block class to each and every one of these class names with no luck, the navigation items (li menu items) are still pulling to the left. I’ve also tried adding in my own custom class to replicate the center-block in my own custom.css file with no luck.

So where exactly should be putting the center-block or any other center code? I’ve gone through and inspected each element to try to work out which ones are not exactly being centered but I still can’t put my finger on it.

<nav class="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
    <div class="container">
        <div class="row">
            <nav class="container primary">
                <div class="col-sm-12 primary responsiveSelectContainer">
                    <ul id="menu-primary-navigation-1" class="menu responsiveSelectFullMenu">
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2002"><a href="http://localhost/wordpress/">Home</a></li>
            </nav>
        </div>
    </div><!-- .container -->
</nav>

the original php and html code:

<nav class="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
    <div class="container">
        <div class="row">
            <nav class="container primary">
                <?php wp_nav_menu(  
                    array(  
                        'menu'              => 'Primary Navigation',
                        'container'         => 'div',
                        'container_class'   => 'col-sm-12 primary'  
                        )  
                ); ?> 
            </nav>
        </div>
    </div><!-- .container -->
</nav><!-- .site-navigation -->