How can I center this custom menu?

Question

<style type='text/css'>
    ul#nav { width: 1500px; margin: 0 auto; text-align: center !important; overflow: hidden;}
    
    ul#nav li {float: left; list-style: none; align: center;}
    
    ul#nav li a{display: block; width: 110px; height: 90px; padding: 20px 0 0 0; margin-right: 30px; margin-left: 5px; font: bold 17px &#39;Audiowide&#39;; text-transform: uppercase; color: #fff !important; text-shadow: 0 1px 3px #636161; text-decoration: none; background: url(LINK DA SUA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}
    
    ul#nav li a:hover { background: url(LINK DA SUA FAIXINHA) 0 0 no-repeat;color: #eee9d9; text-shadow: 0 2px 3px #4c2222; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}
    
    ul#nav li a.js:hover {background: url(LINK DA SUA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}
    
    
    </style>
    </head>
    
    </header>
    <div style='top: 0px; height: 30px; width: 100%; z-index: 4; background: #b7e2f8; position: fixed; left: 0px; text-align: center; '>
    <div style='position: absolute; top: -15px; width: 900px; text-align: center !important; float: center !important; '>
    <ul id='nav'>
    <li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
    </ul>
    </div> </div>

This is a custom menu that sits at the top of the blog, but on the left, how can I center?

Answer 1

It needs many modifications, follow the example:

.main {
  top: 0px;
  height: 30px;
  width: 100%;
  z-index: 4;
  background: #b7e2f8;
  position: fixed;
  left: 0px;
  text-align: center;
}

.main .sub {
  text-align: center;
}

ul#nav {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul#nav a {
  line-height: 30px;
}

<div class="main">
  <div class="sub">
    <ul id='nav'>
      <li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
    </ul>
  </div>
</div>