why can't i center my menubar/navigation
Question: I'm new with **html** and **css** but I'm making a responsive dropdown menu
and I cant find why my menu/navigation bar won't center in the desktop
version.

I found the menu from [here](http://www.cssscript.com/pure-css-mobile-
compatible-responsive-dropdown-menu/) and downloaded it.

Here is my code:

    
    
    <style>
    @import url(http://fonts.googleapis.com/css?family=roboto);
    
    body {
      background: #212121;
      font-size: 22px;
      line-height: 32px;
      color: #ffffff;
      margin: 0;
      padding: 0;
      word-wrap: break-word !important;
      font-family: 'roboto', sans-serif;
    }
    
    h1 {
      font-size: 60px;
      text-align: center;
      color: #FFF;
    }
    
    h3 {
      font-size: 30px;
      line-height: 34px;
      text-align: center;
      color: #FFF;
    }
    
    h3 a { color: #FFF; }
    
    a { color: #FFF; }
    
    h1 {
      margin-top: 100px;
      text-align: center;
      font-size: 60px;
      line-height: 70px;
      font-family: 'roboto', sans-serif;
    }
    
    #container {
      margin: 0 auto;
      max-width: 890px;
    }
    
    p { text-align: center; }
     .toggle, [id^=drop] {
     display: none;
    }
    
    nav {
      margin: 0;
      padding: 0;
      background-color: #254441;
    }
    
    #logo {
      display: block;
      padding: 0 30px;
      float: left;
      font-size: 20px;
      line-height: 60px;
    }
    
    nav:after {
      content: "";
      display: table;
      clear: both;
    }
    
    nav ul {
      float: right;
      padding: 0;
      margin: 0;
      list-style: none;
      position: relative;
    }
    
    nav ul li {
      margin: 0px;
      display: inline-block;
      float: left;
      background-color: #254441;
    }
    
    nav a {
      display: block;
      padding: 0 20px;
      color: #FFF;
      font-size: 20px;
      line-height: 60px;
      text-decoration: none;
    }
    
    nav ul li ul li:hover { background: #000000; }
    
    nav a:hover { background-color: #000000; }
    
    nav ul ul {
      display: none;
      position: absolute;
      top: 60px;
    }
    
    nav ul li:hover > ul { display: inherit; }
    
    nav ul ul li {
      width: 170px;
      float: none;
      display: list-item;
      position: relative;
    }
    
    nav ul ul ul li {
      position: relative;
      top: -60px;
      left: 170px;
    }
    
    li > a:after { content: ' +'; }
    
    li > a:only-child:after { content: ''; }
    
    
    /* Media Queries
    --------------------------------------------- */
    
    @media all and (max-width : 768px) {
    
    #logo {
      display: block;
      padding: 0;
      width: 100%;
      text-align: center;
      float: none;
    }
    
    nav { margin: 0; }
    
    .toggle + a,
     .menu { display: none; }
    
    .toggle {
      display: block;
      background-color: #254441;
      padding: 0 20px;
      color: #FFF;
      font-size: 20px;
      line-height: 60px;
      text-decoration: none;
      border: none;
    }
    
    .toggle:hover { background-color: #000000; }
    
    [id^=drop]:checked + ul { display: block; }
    
    nav ul li {
      display: block;
      width: 100%;
    }
    
    nav ul ul .toggle,
     nav ul ul a { padding: 0 40px; }
    
    nav ul ul ul a { padding: 0 80px; }
    
    nav a:hover,
     nav ul ul ul a { background-color: #000000; }
    
    nav ul li ul li .toggle,
     nav ul ul a { background-color: #212121; }
    
    nav ul ul {
      float: none;
      position: static;
      color: #ffffff;
    }
    
    nav ul ul li:hover > ul,
    nav ul li:hover > ul { display: none; }
    
    nav ul ul li {
      display: block;
      width: 100%;
    }
    
    nav ul ul ul li { position: static;
    
    }
    }
    
    @media all and (max-width : 330px) {
    
    nav ul li {
      display: block;
      width: 94%;
    }
    
    }
    </style>
    
    
    <body>
    <nav>
    
      <div id="logo">Demo Page</div>
      <label for="drop" class="toggle">Menu</label>
      <input type="checkbox" id="drop" />
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li> 
          <!-- First Tier Drop Down -->
          <label for="drop-1" class="toggle">Service +</label>
          <a href="#">Service</a>
          <input type="checkbox" id="drop-1"/>
          <ul>
            <li><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
            <li><a href="#">Service 3</a></li>
          </ul>
        </li>
        <li> 
          
          <!-- First Tier Drop Down -->
          <label for="drop-2" class="toggle">Portfolio +</label>
          <a href="#">Portfolio</a>
          <input type="checkbox" id="drop-2"/>
          <ul>
            <li><a href="#">Portfolio 1</a></li>
            <li><a href="#">Portfolio 2</a></li>
            <li> 
              
              <!-- Second Tier Drop Down -->
              <label for="drop-3" class="toggle">Works +</label>
              <a href="#">Works</a>
              <input type="checkbox" id="drop-3"/>
              <ul>
                <li><a href="#">HTML/CSS</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">Python</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Submit</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
    <h1> Mobile-compatible Responsive Dropdown Menu Demo </h1>
    
    
    </body>


Answer: Try this.

`#nav { width:750px; margin:0 auto; list-style:none;` `}`

`#nav li { float:left; }`

`#nav a { display:block; text-align:center; width:150px; /* fixed width */
text-decoration:none; }`

> Method #1 is primarily using `margin:auto;` to `center` the `nav`. If your
> menu items (li/a) are a fixed width, then this method is probably the
> easiest way to `center` your `nav`. The essentail pieces of code used to
> `center` the `nav` are in bold.

Check out this [site](http://www.websitecodetutorials.com/code/css/css-center-
nav.php) for more. Hope it helps!

