Wrapper is not centered - css

Question

At a certain width the wrapper should shrink and become centered like this: http://i.imgur.com/ny6Y4ur.png but for some reason it doesn't work for me: http://i.imgur.com/N3vPI5e.png What am I doing wrong ?
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

You need display: block on elements that have margin: 0 auto if you want them centered...
#wrapper {
margin: 15px auto !important;
padding: 25px 70px !important;
-webkit-box-shadow: none;
box-shadow: none;
width: 100%;
display:block;
}