Обертка не центрирована

Question

На определенной ширине обертка должна сжиматься и центрироваться так: http://i.imgur.com/ny6Y4ur.png, но по какой-то причине она не работает для меня: http://i.imgur.com/N3vPI5e.png Что я делаю неправильно? CSS:

div#header { 
    height: 140px !important; 
    width: 940px !important; 
    margin: 0 auto !important; 
} 

div#header div#header_logo { 
    position: absolute !important; 
    top: 30px; 
    width: 803px !important; 
} 

div#header div#header_logo h1 { 
    position: relative !important; 
    top: 35px !important; 
    height: 50px !important; 
    width: 269px !important; 
    background: url('../images/compudoc_logo.png') no-repeat !important; 
    float: left !important; 
    margin-top: 15px !important; 
} 

div#header div#header_logo h1 a { 
    display: block !important; 
    width: 269px !important; 
    height: 40px !important; 
    text-indent: -9999px !important; 
} 

div#header div#header_logo h2 a.nl { 
    height: 75px !important; 
    width: 334px !important; 
    text-indent: -5000px !important; 
    background: url('../images/compudoc_side_logo.png') no-repeat !important; 
    float: right !important; 
    margin-left: 200px !important; 
} 

div#header div#header_logo h2 a.nl:hover { 
    height: 75px !important; 
    width: 334px !important; 
    text-indent: -5000px !important; 
    background: url('../images/compudoc_side_logo_hover.png') no-repeat !important; 
} 

div#header div#header_logo h2 a.en { 
    height: 75px !important; 
    width: 334px !important; 
    text-indent: -5000px !important; 
    background: url('../images/compudoc_side_logo_en.png') no-repeat !important; 
    float: right !important; 
    margin-left: 200px !important; 
} 

div#header div#header_logo h2 a.en:hover { 
    height: 75px !important; 
    width: 334px !important; 
    text-indent: -5000px !important; 
    background: url('../images/compudoc_side_logo_hover_en.png') no-repeat !important; 
} 

div#header div#header_logo h2 a.fr { 
    height: 75px !important; 
    width: 334px !important; 
    text-indent: -5000px !important; 
    background: url('../images/compudoc_side_logo_fr.png') no-repeat !important; 
    float: right !important; 
    margin-left: 200px !important; 
} 

div#header div#header_logo h2 a.fr:hover { 
    height: 75px !important; 
    width: 334px !important; 
    text-indent: -5000px !important; 
    background: url('../images/compudoc_side_logo_hover_fr.png') no-repeat !important; 
} 

div#header_logo h2 a { 
    position: relative !important; 
    top: 30px !important; 
    right: 120px !important; 
    height: 75px !important; 
    width: 334px !important; 
    text-indent: -5000px !important; 
    background: url('../images/compudoc_side_logo.png') no-repeat !important; 
    float: right !important; 
    margin-left: 200px !important; 
} 

div#header div#header_logo h2 a:hover { 
    height: 75px !important; 
    width: 334px !important; 
    text-indent: -5000px !important; 
    background: url('../images/compudoc_side_logo_hover.png') no-repeat !important; 
} 

.hiding span { 
    display: none; 
} 

.search { 
    position: relative; 
    left: 710px; 
    bottom: 161px; 
} 

.search input { 
    width: auto !important; 
    background-color: #fff !important; 
} 

.search input:focus { 
    background-color: #f1f6ff !important; 
} 

.item { 
    border: 1px solid #cad3cb; 
    padding: 20px; 
} 

.item img { 
    height: 150px; 
    width: 200px; 
} 

div#languageChoice { 
    width: 70px !important; 
    float: right !important; 
} 

div#languageChoice img { 
    display: inline-block !important; 
    width: 15px !important; 
    height: 12px !important; 
    margin-right: 4px !important; 
} 

#logo { 
    margin-top: 22px !important; 
} 

#logo a img { 
    float: left !important; 
} 

#tagline { 
    color: #888 !important; 
    border-left: 1px solid #e9e9e9 !important; 
    margin: 0 0 0 20px !important; 
    padding: 5px 0 5px 20px !important; 
    float: left !important; 
} 

div#sitenav { 
    position: relative !important; 
    top: 40px !important; 
    right: 45px !important; 
    background: #303030 !important; 
    display: block; 
    width: 79.3em !important; 
    float: left !important; 
    max-height: 52px !important; 
    margin: 0 29px 15px 0; 
} 

.sitenav2 { 
    margin-top: 12px !important; 
} 

.sitenav2 ul li:nth-child(2) a { 
    margin-right: 40px; 
} 

.sitenav2 ul li:nth-child(3), .sitenav2 ul li:nth-child(4), .sitenav2 ul li:nth-child(5), .sitenav2 ul li:nth-child(6), .sitenav2 ul li:nth-child(7), .sitenav2 ul li:nth-child(8) { 
    background: url(../css/images/navigation-divider.png) no-repeat right 50%; 
} 

div#sitenav ul:nth-child(2) li:nth-child(1) { 
    padding-left: 40px !important; 
} 

div#sitenav ul, 
div#sitenav li { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    display: inline !important; 
} 

div#sitenav ul li { 
    display: inline-block !important; 
    vertical-align: top !important; 
    position: relative !important; 
} 

div#sitenav ul li a { 
    display: inline-block !important; 
    color: #fff !important; 
    text-decoration: none !important; 
    font-size: 14px !important; 
    font-weight: 500 !important; 
    padding: 17px 20px !important; 
} 

div#sitenav ul li a:hover { 
    background: #2db2ea !important; 
    color: #fff !important; 
    -webkit-transition: all 0.1s ease-in-out !important; 
    -moz-transition: all 0.1s ease-in-out !important; 
    -o-transition: all 0.1s ease-in-out !important; 
    transition: all 0.1s ease-in-out !important; 
} 

div#sitenav ul:nth-child(1) li:nth-child(1) a, div#sitenav ul:nth-child(1) li:nth-child(2) a, div#sitenav ul:nth-child(2) li:nth-child(1) a, div#sitenav ul:nth-child(2) li:nth-child(2) a, div#sitenav ul:nth-child(2) li:nth-child(3) a, div#sitenav ul:nth-child(2) li:nth-child(4) a, div#sitenav ul:nth-child(2) li:nth-child(5) a, div#sitenav ul:nth-child(2) li:nth-child(6) a { 
    background: url(../css/images/navigation-divider.png) no-repeat right 50%; 
} 

div#sitenav ul:nth-child(2) li:nth-child(1) a { 
    margin-left: 50px !important; 
} 

div#sitenav ul:first-child li:nth-child(2) a { 
    background: none; 
} 

div#sitenav ul:nth-child(3) li a { 
    background-color: #4ea09c; 
} 

.active { 
    background: #2db2ea !important; 
} 

.submenu-active { 
    color: #2db2ea !important; 
} 

/*here*/ 
#content_container { 
    position: relative !important; 
    /*width: 960px !important;*/ 
    margin: 0 auto !important; 
    padding: 0 !important; 
} 

#pageContent { 
    float: left !important; 
    width: 780px; 
} 

#pageContent h2 { 
    font-weight: normal !important; 
    padding: 11px 0 0 0 !important; 
} 

#pageContent a { 
    color: #2db2ea; 
} 

#pageContent a:hover { 
    text-decoration: underline; 
} 

#pageContent p { 
    padding-left: 0 !important; 
} 

#pageContent ul { 
    list-style: disc inside !important; 
} 

.pageContentShop { 
    width: 780px !important; 
} 

.details a { 
    font-size: 1px !important; 
} 

.ui-dialog { 
    overflow: hidden; 
    margin-left: 446px !important; 
} 

.thumb small a { 
    color: #666666 !important; 
    text-decoration: none !important; 
    cursor: default !important; 
} 

#bolded-line { 
    background: #2db2ea !important; 
} 

p { 
    margin: 0 !important; 
} 

img.ui-datepicker-trigger { 
    display: none; 
} 

/*Table*/ 
.table, table.admin, table.factuur, table.lid_detail, table.klant { 
    font-size: 12px; 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0; 
    border: none; 
    margin-bottom: 15px; 
    -webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1); 
    box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1); 
} 

.table th, table.admin th, table.factuur th, table.lid_detail th, table.klant th { 
    text-align: center; 
    border: 1px solid #dddddd; 
    border-right: none; 
    background-color: #fafafa; 
    padding: 10px 15px; 
    color: #404040; 
    vertical-align: top; 
    font-size: 14px; 
    font-weight: bold; 
} 

.table td:last-child, table.admin td:last-child, table.factuur td:last-child, table.lid_detail td:last-child, table.klant td:last-child { 
    border-right: 1px solid #ddd; 
} 

.table th:last-child, table.admin th:last-child, table.factuur th:last-child, table.lid_detail th:last-child, table.klant th:last-child { 
    border-right: 1px solid #ddd; 
} 

.table td, table.admin td, table.factuur td, table.lid_detail td, table.klant td { 
    text-align: center; 
    padding: 10px 15px; 
    border: #e0e0e0 1px solid; 
    border-top: none; 
    border-right: none; 
} 

.table tr:hover td, table.admin tr:hover td, table.factuur tr:hover td, table.lid_detail tr:hover td, table.klant tr:hover td { 
    background-color: #fafafa; 
} 

.tableFacturen th, .tableFacturen td { 
    padding: 0 !important; 
    text-align: center !important; 
} 

.tableMijn th, .tableMijn td { 
    padding: 2px !important; 
    text-align: center !important; 
} 

.no-padding-1 th, .no-padding-1 td { 
    text-align: center; 
    padding: 1px !important; 
} 

table.lid_detail tr:first-child td { 
    border-top: 1px solid #e0e0e0 !important; 
} 

table.lid_detail input[type="submit"] { 
    margin-right: 25px !important; 
} 

.borderTop tr:first-of-type td { 
    border-top: 1px solid #e0e0e0 !important; 
} 

/**/ 

img.report_problem { 
    margin: 0 auto; 
} 

#content_container #sec_nav_container, #sec_nav_container2, 
#content_container .columns { 
    float: left !important; 
    display: inline !important; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

#sec_nav_container { 
    position: absolute; 
    left: 805px; 
    margin-right: 0 !important; 
} 

#sec_nav_container2 { 
    width: 150px; 
    position: relative; 
    right: 17px; 
    padding-right: 11px; 
    margin-left: 0 !important; 
} 

#sec_nav_container { 
    width: 160px !important; 
} 

#sec_nav_container img:first-child { 
    width: auto; 
    height: auto; 
} 

#topVerkoop .tabel img { 
    width: 130px !important; 
    height: 90px !important; 
} 

.tabel_hoofding small { 
    float: left; 
    font-weight: normal !important; 
    font-size: 10px; 
} 

.no-border td { 
    border: none !important; 
} 

.no-border-2 { 
    border: none !important; 
} 

.add tbody input { 
    margin-bottom: 5px !important; 
} 

.tabel { 
    position: relative; 
    vertical-align: middle !important; 
} 

table.formPadding td { 
    padding-right: 12px !important; 
} 

/* Self Clearing Goodness */ 
#content_container:after { 
    content: "\0020" !important; 
    display: block !important; 
    height: 0 !important; 
    clear: both !important; 
    visibility: hidden !important; 
} 

#submenu li a { 
    color: #666; 
    display: block !important; 
    padding: 3px 0 !important; 
    padding-left: 12px !important; 
    background: url(../css/images/links-list-arrow-02.png) no-repeat left 47% !important; 
} 

.links-list li a:hover { 
    color: #fff !important; 
} 

#submenu li a:hover { 
    color: #2db2ea; 
} 

.links-list li:first-child a, 
#submenu li:first-child a { 
    margin: -3px 0 0 0 !important; 
} 

div#comment_ticker h4 { 
    cursor: default; 
    font-size: 16px !important; 
} 

input[type="text"], 
input[type="password"], 
input[type="email"], 
textarea, 
select { 
    display: inline-block !important; 
} 

.notification { 
    font-family: "Open Sans", sans-serif; 
    font-size: 12px; 
    line-height: 18px; 
    margin-bottom: 15px; 
    position: relative; 
    padding: 14px 40px 14px 18px; 
    -webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1); 
    box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1); 
    background-color: #ffe9e9; 
    color: #de5959 !important; 
    border: 1px solid #fbc4c4; 
} 

.notification:before { 
    content: "Error: "; 
    font-weight: bold; 
} 

.notification a { 
    color: #de5959 !important; 
} 

.notification a:link { 
    text-decoration: underline; 
} 

.ui-dialog { 
    top: 100px !important; 
    position: fixed !important; 
} 

/*code for the carousel */ 
#carousel_inner { 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    height: 150px; 
    width: 950px; /* important (this width = width of list item(including margin) * items shown */ 
    overflow: hidden; /* important (hide the items outside the div) */ 
    /* non-important styling bellow */ 
    /*background: #ffffff;*/ 
} 

#carousel_ul { 
    position: relative; 
    left: -150px; /* important (this should be negative number of list items width(including margin) */ 
    list-style-type: none; /* removing the default styling for unordered list items */ 
    margin: 0; 
    padding: 0; 
    width: 9999px; /* important */ 
    /* non-important styling bellow */ 
    padding-bottom: 10px; 
} 

#carousel_ul li { 
    float: left; /*important for inline positioning of the list items*/ 
    width: 180px; /*fixed width, important*/ 
    /* just styling bellow*/ 
    padding: 0; 
    text-align: left; 
    /*height:40px;*/ 
    color: #fff; 
    font-style: italic; 
    font-size: 11px; 
    font-weight: normal !important; 
    /*background: #ffffff;*/ 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left: 5px; 
    margin-right: 5px; 
    cursor: default; 
} 

#carousel_ul li center a img { 
. margin-bottom : - 4 px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that */ 
    /* styling */ 
    cursor: hand; 
    border: 0px; 
} 

#left_scroll, #right_scroll { 
    float: left; 
    height: 100px; 
    width: 0; 
    background: #ffffff; 
} 

#left_scroll img, #right_scroll img { 
    border: 0; /* remove the default border of linked image */ 
    /*styling*/ 
    cursor: hand; 

} 

.form-margin { 
    margin-right: 3px !important; 
} 

#footer-bottom { 
    cursor: default; 
    height: 20px !important; 
    text-align: center; 
} 

#footer-bottom a:hover { 
    color: #2db2ea !important; 
} 

#footer-bottom-shop { 
    padding: 22px 0; 
    cursor: default; 
    height: 7px !important; 
    text-align: center; 
} 

#footer-bottom-shop a { 
    color: #fff; 
} 

.shop-footer-text { 
    position: relative; 
    bottom: 13px !important; 
} 

#footer-bottom-shop a:hover { 
    color: #2db2ea !important; 
} 

#scroll-top-top { 
    width: 35px; 
    position: relative; 
    left: 925px; 
    bottom: 40px; 
} 

#scroll-top-top a { 
    background-color: #2db2ea; 
} 

.scroll-top-top-shop { 
    bottom: 39px !important; 
} 

#save { 
    cursor: hand; 
} 

td.item:hover { 
    background: #fafafa; 
} 

.loginForm { 
    margin: 0 180px; 
} 

.login { 
    margin: 0; 
} 

input[type="submit"], #pageContent input[type="button"] { 
    color: #ffffff !important; 
    margin: 10px 0 !important; 
    background: #444 !important; 
    padding: 9px 12px !important; 
    display: inline-block !important; 
    border: 0 !important; 
    font-family: "Open Sans", sans-serif !important; 
    font-weight: bold !important; 
    cursor: pointer !important; 
    width: auto !important; 
    -webkit-transition: all 0.1s ease-in-out !important; 
    -moz-transition: all 0.1s ease-in-out !important; 
    -o-transition: all 0.1s ease-in-out !important; 
    -ms-transition: all 0.1s ease-in-out !important; 
    transition: all 0.1s ease-in-out !important; 
} 

input[type="submit"]:hover, #pageContent input[type="button"]:hover { 
    background: #2db2ea !important; 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -o-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
} 

#pageContent input[type="button"] { 
    margin-right: 4px !important; 
} 

#pageContent form small { 
    margin-left: 8px; 
} 

#pageContent form td { 
    padding-right: 8px !important; 
} 

#pageContent select { 
    padding: 5px 8px !important; 
} 

#pageContent form input[type="text"], #pageContent form input[type="username"], #pageContent form input[type="password"], #pageContent select, #pageContent textarea, #pageContent select.form-margin { 
    margin-bottom: 5px !important; 
} 

@media only screen and (max-width: 1029px) { 

    #sitenav { 
     display: none !important; 
    } 

    #wrapper { 
     margin: 15px auto !important; 
     padding: 25px 70px !important; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
     width: 100%; 
    } 

    body { 
     background: #fff; 
    } 

    /*#header, #main_container {*/ 
    /*width: 768px !important;*/ 
    /*}*/ 
    #pageContent { 
     width: 110%; 
    } 

    #footer { 
     margin: 0 auto; 
     padding: 15px 0 0 0; 
     width: 100% !important; 
    } 

} 

/*@media only screen and (max-width: 767px) {*/ 

/*div#sitenav {*/ 
/*float: none !important;*/ 
/*display: none !important;*/ 
/*}*/ 

/*.js #nav {*/ 
/*display: none !important;*/ 
/*}*/ 
/*}*/ 

Answer 1

display: block Вам нужно на элементы, которые имеют margin: 0 auto, если вы хотите, чтобы они в центре ...

#wrapper { 
    margin: 15px auto !important; 
    padding: 25px 70px !important; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    width: 100%; 
    display:block; 
}