How can the menu center right (СSS)

I want the menu to be in the center of the page in the browser. I add my CSS file in question. I kind of wrote everything correctly, you can help me fix the error. The table is centered and I want the menu too. I want the menu to be in the center of the page in the browser. I add my CSS file in question. I kind of wrote everything correctly, you can help me fix the error. The table is centered and I want the menu too.

My CSS file

html, body {
        background: black;
        font: 100% helvetica, arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    
    #container {            
        margin: 40px auto;
        width: 800px;  
        
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    
    #header {
        border-bottom: 1px solid white;            
        margin: 0 0 20px;
        overflow: hidden;
        padding: 0 0 10px;
    }
    
    
    
    a {
        color: white;
        background: red;
        font-weight: bold;
        text-decoration: none;
        -moz-transition: all 300ms ease-out;
        -webkit-transition: all 300ms ease-out; 
        -ms-transition: all 300ms ease-out; 
        transition: all 300ms ease-out;
    }
    
    a:hover {
        color: white;    
    }
    
    /*============================*/
    /* Main Navigation
    /*============================*/
    #nav {            
        height: 50px;
        line-height: 50px;            
        width: 100%;
        
    }
    
    #nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    #nav li {    
        background: white;
        background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
        background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
        background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
        background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);    
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));    
        background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
        float: left;
        position: relative;
        width: 20%;    
    }
    
    #nav li:first-child, #nav li:first-child a { 
        -webkit-border-radius: 3px 0 0 3px; 
        -moz-border-radius: 3px 0 0 3px; 
        border-radius: 3px 0 0 3px; 
    }
    #nav li:last-child, #nav li:last-child a { 
        -webkit-border-radius: 0 3px 3px 0; 
        -moz-border-radius: 0 3px 3px 0; 
        border-radius: 0 3px 3px 0; 
    }
    
    #nav a {                
        border-right: 1px solid red;
        border-left: 1px solid red;
        color: white;
        display: block;
        font-size: 14px;
        height: 50px;
        overflow: hidden;
        text-align: center;
        text-shadow: 0 -1px 0 red;    
        -webkit-box-shadow: inset 0 0 10px transparent;
        -moz-box-shadow: inset 0 0 10px transparent;
    }
    
    #nav a:after {
        background: rgba(255,255,255,.07);
        content: "";
        height: 25px;
        left: 0;
        position: absolute;
        width: 100%;
    }
    
    #nav li:hover > a {
        background: black;
        border-left-color: #222;
        color: white;
        text-shadow: 0 1px 0 #000;
        -webkit-box-shadow: inset 0 0 10px #111;
        -moz-box-shadow: inset 0 0 10px #111;
        box-shadow: inset 0 0 10px #111;
    }
    #nav span {
        position: relative;    
    }
    
    #nav a:active span {
        color: red;
        position: relative;
        top: 1px;
    }
    
    #nav li:first-child a {
        border-left: none;    
    }
    
    #nav li:last-child a {
        border-right: none;    
    }
    
    .dropdown > a span:after {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #ccc;
        content: "";
        right: -13px;
        position: absolute;
        top: 3px;
    }
    
    .dropdown:hover > a span:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #fff;
        content: "";
        right: -15px;
        position: absolute;
        top: 6px;
    }
    
    /*============================*/
    /* Sub Navigation
    /*============================*/
    #nav ul ul {
        opacity: 0;
        position: absolute;
        top: 50px;
        visibility: hidden;
        width: 0;
        -moz-transition: all 300ms ease-out;
        -webkit-transition: all 300ms ease-out; 
        -ms-transition: all 300ms ease-out; 
        transition: all 300ms ease-out;
    }
    
    #nav ul li:hover ul {
        opacity: 1;
        visibility: visible;
        width: 100%;
    }
    
    #nav ul ul li {
        background: white;
        float: none;    
        line-height: 0;
        width: 100%;            
    }
    
    #nav ul ul li:nth-child(odd) {
        background: white;    
    }
    
    #nav ul ul li:first-child, #nav ul ul li:first-child a { 
        -webkit-border-radius: 0; 
        -moz-border-radius: 0; 
        border-radius: 0; 
    }
    #nav ul ul li:last-child, #nav ul ul li:last-child a { 
        -webkit-border-radius: 0 0 3px 3px; 
        -moz-border-radius: 0 0 3px 3px; 
        border-radius: 0 0 3px 3px; 
    }
    
    #nav ul ul li a {
        border-right: none;
        border-left: none;
        border-top: 1px solid white;
        color: #555;
        font-size: 12px;
        height: 36px;
        line-height: 36px;
        padding: 0 0 0 15px;
        text-align: left;
        text-shadow: 0 -1px 0 #eee;
    }
    
    #nav ul li ul li a:after {
        background: rgba(0,0,0,.02);
        content: "";
        height: 18px;
        left: 0;
        position: absolute;
        top: 19px;
        width: 100%;
    }
    
    #nav ul ul li a:hover {
        background: white;
        color: #111;
        text-shadow: 0 1px 0 #fff;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    
    #nav ul ul a:active span {
        color: white;
        position: relative;
        top: 1px;
    }
    
    .login-form {
        
      position:absolute;
            width:200px;
            height:150px;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
           
    
    }

     <div id="container">
        <div id="header">
           
            
        </div>
        <div id="nav">
            <ul>
                <li><a href="${pageContext.request.contextPath}/"><span>Главная</span></a></li>
                
                <li class="dropdown"><a href="${pageContext.request.contextPath}/allStudents"><span>Студенты</span></a>
                    <ul>
                        <li><a href="${pageContext.request.contextPath}/allStudents"><span>Список студентов</span></a></li>
                        <sec:authorize access="hasRole('ADMIN') || hasRole('USER')">
                        <li><a href="${pageContext.request.contextPath}/addStudent"><span>Добавить студента</span></a></li>
                        </sec:authorize>
                    </ul>
                </li>
                <sec:authorize access="!isAuthenticated()"> 
                <li class="dropdown"><a href="${pageContext.request.contextPath}/login"><span>Войти</span></a>
                   </li>
                </sec:authorize>  
                <sec:authorize access="!isAuthenticated()"> 
                <li><a href="${pageContext.request.contextPath}/logout"><span>Выйти</span></a></li>
                 </sec:authorize>
            </ul>
        </div>
    </div>