Как центрировать выравнивание div с фиксированной шириной?

Question

Я новичок в html и css и имею проблему с макетом стороны, которую я строю. Я хочу, чтобы «top_header» и «top_menu» стороны имели ширину 1920 пикселей, а «main_section» - всего 1000 пикселей и центрировали снизу. раньше, когда у меня было все это до максимальной ширины 1000 пикселей, он был совершенно точным и центрированным, но теперь, когда я сменил общую страницу на максимальную ширину 1920 пикселей, а main_section до 1000 пикселей, mainsection поместил 2 левой стороны и Я не могу снова сосредоточиться на помощи.

HTML:

<div id="big_wrapper"> 
     <header id="top_header"> 
      <h1>Welcome</h1> 
     </header> 

     <nav id="top_menu"> 
      <ul> 
       <li>Home</li> 
       <li>About</li> 
       <li>Shop</li> 
      </ul> 
     </nav> 

      <div id="new_div"> 

      <section id="main_section"> 
       <article> 
        <header> 
         <hgroup> 
          <h2></h2> 
          <h3></h3> 
         </hgroup> 
        </header> 
        <p></p> 
        <footer> 
         <p></p> 
        </footer> 
       </article> 

      </section> 

      <aside id="side_news"> 
       <h2></h2> 
       <p></p> 
      </aside> 

      </div> 

     <footer id="the_footer"> 
      <p></p> 
      <p></p> 
     </footer> 
    </div> 

CSS:

*{ 
    margin:0px; 
    padding:0px; 
} 
h1{ 
    font: bold 25px Tahoma; 
} 
h2{ 
    font: bold 19px Tahoma; 
} 
h3{ 
    font: bold 14px Tahoma; 
} 
header, nav, section, article, hgroup, aside, footer;{ 
    display:box; 
} 
body{ 
    width:100%; 
    display:-webkit-box; 
    -webkit-box-pack: center; 
} 
#big_wrapper{ 
    max-width:1920px; 
    margin: 20px 0px; 
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    -webkit-box-flex:1; 
} 
#top_header{ 
    border: 2px solid black; 
    padding:20px; 
    border-radius:10px; 
    background: #3b5998; 
} 
#top_menu{ 
    border: 2px solid black; 
    border-radius:10px; 
    text-align:center; 
    margin-top:10px; 
} 
#top_menu li{ 
    list-style:none; 
    display:inline-block; 
    padding:5px; 
    font: bold 14px Tahoma; 
} 
#new_div{ 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
    border:5px solid red; 
    width:1000px; 
    margin:5px; 
} 
#main_section{ 
    border:2px solid black; 
    border-radius:10px; 
    margin: 30px 20px; 
    padding:20px; 
    -webkit-box-flex:1; 
} 
#main_section article{ 
    margin:20px; 
    padding:20px; 
    border:1px solid black; 
    border-radius:10px; 
} 
#main_section footer{ 
    text-align:right; 
} 
#side_news{ 
    border:1px solid black; 
    border-radius:10px; 
    margin:40px 0px; 
    padding:20px; 
    width:220px; 
} 
#the_footer{ 
    border-top:1px solid black; 
    text-align:center; 
    margin:10px; 
} 

Answer 1

Изменить запас оберточной DIV new_div от 5px к 0 auto так:

#new_div { 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    border: 5px solid red; 
    width: 1000px; 
    margin: 0 auto; 
} 

jsFiddle с выше кодами: https://jsfiddle.net/e0d8my79/184/