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: 
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>
```
Add:

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

```

to your css:

```css
ul.nav {
  display: inline-block;
}
```

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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>
```