我如何得到我的 <nav> 栏始终使用CSS3始终位于页面中心？

Question

How do I get my bar to be centered in the page at all times?

And how do I get the color to stretch across as well? (I know I'll need to change the background color of list item, but nothing else seems to work).

Here is my CSS code:

  #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;}

And my HTML CODE:

<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

Use this:

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

It may help.