I tried a lot of solutions to center my navigation buttons but non worked and I don't find the right solution. I tried space-between but I want it responsive.

Here is my HTML: 

```
<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>

</ul>

```

Here is my CSS code: 

```
nav li{
    display: inline-block;
    padding: 10px;}

nav a{
    color:#fff;
    text-decoration:none;
}

nav .btn{
  -webkit-border-radius: 17;
  -moz-border-radius: 17;
  border-radius: 17px;
  font-family: Georgia;
  color: #fff;
  font-size: 20px;
  background: #8B0000;
  padding: 5px 10px 5px 10px;
  margin:0 auto;
  text-decoration: none;
 text-align: center;}

.btn:hover{
  background: #A26161;
  text-decoration: none;
}

```

Thank you for your advices !