Bootstrap 3: center column content horizontally on a 3 column layout with not fixed width

Question

I'm trying to center a navbar (actually im not using the bootstrap classes for a navbar) inside a three column layout with not fixed widths. I have tried almost all the approaches i found for this and none of them are working for me (pretty sure also that maybe i'm doing something wronng).

Here's the HTML:

  <div class="submenu-categories">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-2 col-md-2"><span><a href="#">76 products</a></span></div>
        <nav class="col-lg-8 col-md-8">
          <ul>
            <li><a href="#">standard</a></li>
            <li><a href="#">premium</a></li>
            <li><a href="#">super premium</a></li>
            <li><a href="#">ultra premium</a></li>
            <li><a href="#">corporate</a></li>
          </ul>
        </nav>  
        <div class="col-lg-2 col-md-2"><span><a href="#">show all wines</a></span></div>
      </div>  
    </div>  
  </div>

Here's the SCSS:

ul {
   list-style-type: none;
   margin: 0!important;
   padding: 0;
}

nav {
    ul {
        margin:0;
        li {
            @media only screen and (min-width:768px) {
                float:left;
            }

            text-transform: uppercase;
            a {
                &:hover {
                    text-decoration: none;
                }
            }
        }
    }
}

.submenu-categories {
    background-color: #1c1c1c;
    display: none;
    height:5.9375em;
    line-height:5.9375em;
    opacity: 0.9;
    padding: 0;
    text-align: center;

    @media only screen and (min-width:768px) {
        display: block;
    }

    .ctn {
        @media only screen and (min-width:1285px) {
            padding:0 15em 0 7em;
        }   
    }       

    nav {
        border: 1px solid red;
        ul {

            li {
                &.with-border {
                    a {
                        border-right:1px solid white;
                        padding-right:2em;
                    }
                }                   

                a {
        color: white;
                    font-size: .75em;
                    font-weight: 600;
                    margin: 0 .5em 0 .5em;
                    text-transform: uppercase;

                    @media only screen and (min-width:830px) {  
                        margin: 0 1.875em 0 1.875em;
                    }

                    &:hover {
                        border-bottom: 3px solid red;
                    }
                }
            }
        }
    }

    span {

        display: inline-block;

        a {
            color: #979797;
            font-size: .75em;
            font-weight: 600;
            text-transform: uppercase;              

            &:hover {
                text-decoration: underline !important;
            }
        }
    }       
}

Here's the pencode: http://codepen.io/anon/pen/wzvGmY

I need to center the menu in the middle column but i just can't do it without giving the UL on that nav a fixed width, is there any way to center that element without having to give a fixed with to the UL ?

Answer 1

Is this what you are after? http://codepen.io/panchroma/pen/ambkky

The changes I made were

nav {
 ul {
  text-align:center; /* new */
   li {
     @media only screen and (min-width:768px) {
      //float:left; /* new */
      display:inline-block; /* new */
    }
...
}