css - Why Won't, and How, Will my UL get centered inside of a navbar DIV? -

I am creating a "flat design" website, and for my navbar, I would like to extend it to width below it Straight division I did it. But, for the navigation, I used a list, the list inline is displayed in the form of blocks, but I want UL to be centered in NAV Div, even if it is the width. This will be a dynamic width, here's my CSS:

  div # header {width: 982px; Height: 160px; Margin Top: 10px; Margin-Correct: Auto; Margin-left: auto; } Div # nav {width: auto; Height: 43px; Padding-top: 15px; Padding-right: 15px; Padding-bottom: 5px; Background color: RGBA (100,100,100,0.3); Border-left-color: RGBA (255,255,255,0.2); Border-right-color: RGBA (255,255,255,0.2); Border-right-width: 1px; Border-right-style: solid; Border-left-width: 1px; Border-left-style: solid; Border-top-width: 1px; Border-top-style: solid; Border-top-color: RGBA (255,255,255,0.2); Margin-left: auto; Margin-Correct: Auto; } #nav ul {padding: 0; List-style: none; Display: inline-block; Margin: 0; } # Nav ul li {width: 48px; Height: 48px; Margin-left: 15px; Display: inline-block; Background color: # 000000; Padding: 0; } # Nav ul li a {z-index: 10; } #googleplus {width: 48px; Height: 48px; Background Image: URL ('images / googleplus.png'); Display area; } # Function book {width: 48px; Height: 48px; Background Image: URL ('images / facebook.png'); Display area; } # Tweeter {width: 48px; Height: 48px; Background Image: URL ('images / twitter.png'); Display area; } #youtube {width: 48px; Height: 48px; Background Image: URL ('images / youtube.png'); Display area; } # Minture {width: 48px; Height: 48px; Background Image: URL ('images / minecraft.png'); Display area; } #nav ul li # googleplus {background color: # d34836; Transition: Background color; Transition period: 0.17s; } # Nav ul league # googleplus: hover {background-color: # c23725; } #nav ul li # facebook {background-color: # 3b5998; Transition: Background color; Transition period: 0.17s; } #nav ul li # facebook: hover {background-color: # 2a4887; } #nav ul li # twitter {background-color: # 4099ff; Transition: Background color; Transition period: 0.17s; } #nav ul li # twitter: hover {background-color: # 3188ee; } # Nav ul li # youtube {background-color: # d443a; Transition: Background color; Transition period: 0.17s; } # Nav ul li # youtube: hover {background color: # BC 221C; } # Nav ul li # microfort {background color: # 5e5645; Transition: Background color; Transition period: 0.17s; } #nav ul li minecraft: hover {background-color: # 4d4534; }   
 And here is HTML:  
  & lt; Div id = "header" & gt; & Lt; Div id = "logo" & gt; & Lt; / Div & gt; & Lt; Div id = "nav" & gt; & Lt; Ul & gt; & Lt; Li id = "facebook" & gt; & Lt; An id = "facebook" href = "#" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "twitter" & gt; & Lt; An ID = "Twitter" href = "#" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "youtube" & gt; & Lt; An id = "youtube" href = "#" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "money craft" & gt; An id = "money craft" href = "#" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 Can anyone understand the way to focus ul?  
 PS I have already tried margin: 0 auto; Do not reply with it.   
 
 
 Why do not use the suffix box model or the Flexbox?  
 You will make a layout very fast and simple.  
 Add these sections to your basic element, (I mean in the  nav  element):  
    
 Where:  
 
  p-flexbox  means  guardian-flexX   < Li>  Flex-HCC  means  Flex-horizontal-center-center    
 and in your CSS file, you must Will keep:  
  .p-flexbox {display: -Winkit-box; Display: -moz-box; display box; }. Flex-hcc {-webkit-box-orient: horizontal; -moz-box-orient: horizontal; Box-Orient: Horizontal; -WebKit-box-pack: Center; -moz-box-pack: center; Box-Pack: Center; -WebKit-box-align: center; -Moze-box-align: center; Box-align: center; }   
 Here's an example:  
 As I said in another post,  this is a model under box , so be careful Stay!  
 Cheers, Leo