css - センター ブートストラップ ナビゲーション アイテム

Question

ul に新しいクラスを追加し、margin: 0 auto および text-align: center でスタイルを設定しようとしましたが、機能しません..

<section class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.php">Home</a></li>
                <li><a href="venue.php">Venue</a></li>
                <li><a href="schedule.php">Schedule</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Artists <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li><a href="artists.php" tabindex="-1">All Artists</a></li>
                            <li class="divider"></li>
                            <li><a href="#" tabindex="-1">1st</a></li>
                            <li><a href="#" tabindex="-1">2nd</a></li>
                            <li><a href="#" tabindex="-1">3rd</a></li>
                        </ul>
                </li>
                <li><a href="Register.php">Register</a></li>
            </ul>   
        </section>

Answer 1

このような

デモ

CSS

.nav{
    background-color:red;
    width:300px;
    margin:0 auto;
    text-align:center;
}
.nav ul {
list-style-type:none;

}
.nav ul li{

}