html - 如何使用 CSS3 使我的 <nav> 栏始终位于页面中央？

Question

如何让我的栏始终位于页面中央？

我如何让颜色也延伸？ (我知道我需要更改列表项的背景颜色，但似乎没有其他效果)。

这是我的 CSS 代码:

  #nav {font-family: journalregular; 
     width: 90%;
     box-shadow: 0px 7px 22px -6px rgba(0,0,0,0.75);}


#nav ul {
        list-style: none;
        padding: 0;
        margin: 0;  
        background:#ffffff; 
    }

    #nav a {
        font-weight: bold;
        font-size: 250%;
        color: black;
        text-decoration: none;
        cursor: default;
    }

    #nav li li a {
        display: block;
        font-weight: normal;
        font-size: 180%;
        font-weight: bold;
        color: black;
        padding: 10px 10px;
    }

    #nav li li a:hover {cursor:pointer;
                    background: pink;}

    #nav li {
        display: inline-table;
        position: relative;
        width: 10em;
        text-align: center;
        cursor: default;
        background-color: #DEB887;
        /*border: 1px solid #7d6340;
        border-width: 0px 0px 1px 0px;*/
    }

    #nav li ul{
        position: absolute;
        top: 100%;
        width:10em;
        font-weight: normal;
        padding: 0.5em 0 1em 0;
        border: solid 1px #DEB887;
    }

    #nav li>ul {
        top: auto;
        left: auto;
        display: none;
        opacity: 0;
        transition: display .5s;
    }

    #nav li li {
        display: block;
        float: none;
        background-color: white;
        border: 0;
    }

    #nav li:hover > ul{
        display: block;
        opacity: 1;
    }

a{text-decoration: none;}

还有我的 HTML 代码:

<link rel="stylesheet" href="css/styles.css">

<nav id="nav">
    <ul>        
        <li>
            <a href="#">Geography</a>
        </li>

        <li>
            <a class="ambMenu" href="#">Ambience</a>
                <ul>
                    <li><a href="#">House</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
        </li>

        <li>
            <a href="#">Pets</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                </ul>
        </li>

        <li>
            <a href="#">Food</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                </ul>
        </li>
    </ul>
</nav>

Answer 1

使用这个:

.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    background-color: #b0e0e6;
}

这可能有帮助。