How do I center align a fixed-width div?

Question

I am new to html and css and have a problem with the layout of the side i am building. i want the "top_header" and the "top_menu" of the side to have a width of 1920px and the "main_section" to be only 1000px and centered underneath. before when i had all of it set to a max-width of 1000px it was perfectly fine and centered but now when i changed the overall page to a max-width of 1920px and the main_section to 1000px the mainsection has floated 2 the left side and i cant get it centered again pls help.

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

Change the margin of the wrapper div new_div from 5px to 0 auto like this:

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

jsFiddle with above codes: https://jsfiddle.net/e0d8my79/184/