Question: I've got a ul nav which I've tried to center using `text-center` and failed. Also tried using `margin-auto` which also failed. I need to have the li centered equally. Possibly could use `grid` if it's turns out to be more elegant.

```
<div class="col-md-12 no-side-padding text-center">
    <ul class="nav nav-pills movie-sel-ul text-center">
      <li role="presentation" class="active"><a href="#">Now Showing</a></li>
      <li role="presentation"><a href="#">Coming Soon</a></li>
      <li role="presentation"><a href="#">By Theatre</a></li>
      <li role="presentation"><a href="#">Buy Tickets/Passes</a></li>
    </ul>
</div>

```

Answer: 
Just add `inline-block` to `ul`

**CSS**

```
ul{
  display:inline-block;
}

```

**HTML**

```
<div class="col-md-12 no-side-padding text-center">
    <ul class="nav nav-pills movie-sel-ul text-center">
      <li role="presentation" class="active"><a href="#">Now Showing</a></li>
      <li role="presentation"><a href="#">Coming Soon</a></li>
      <li role="presentation"><a href="#">By Theatre</a></li>
      <li role="presentation"><a href="#">Buy Tickets/Passes</a></li>
    </ul>
</div>

```

**[DEMO HERE](https://jsfiddle.net/luispa/kd4kjdck/270/)**
You can set the li to be `inline-block` that allows them to be centered:

```css
ul {
 text-align: center;
 padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}
```

```html
<div class="col-md-12 no-side-padding text-center">
    <ul class="nav nav-pills movie-sel-ul text-center">
      <li role="presentation" class="active"><a href="#">Now Showing</a></li>
      <li role="presentation"><a href="#">Coming Soon</a></li>
      <li role="presentation"><a href="#">By Theatre</a></li>
      <li role="presentation"><a href="#">Buy Tickets/Passes</a></li>
    </ul>
</div>
```