I've changed style.css in contended7 theme,so now this theme have fixed width and height.However,this theme is now on left side browser and I want to be centered,but I don't know how. This is style.css.Can you please help me?

/**
 * Layout
 */
#header-region {
  float: center;
  width: 1030px;
  min-height: 20px;
}
#header-region .block-region {
  display: block;
  margin: 10px;
  padding: .5em;
}
#wrapper {
  float: center;
  width: 1030px;
}
#wrapper #container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 10px;
}
#wrapper #container #header {
  height: 100px;
}
#wrapper #container #header #logo img {
  float: left; /* LTR */
  margin: 10px 0 0 10px; /* LTR */
}
#wrapper #container #header #slogan-floater {
  float: left; /* LTR */
  margin: 10px 0 0 10px; /* LTR */
  padding: 0;
}
#wrapper #container #header #slogan-floater .site-slogan {
  float: left; /* LTR */
  clear: both;
}
/* With 3 columns, require a minimum width of 1020px to ensure there is enough horizontal space. */
body.two-sidebars {
  min-width: 980px;
}
/* With 2 columns, require a minimum width of 800px. */
body.no-sidebars,
body.sidebar-left,
body.sidebar-right {
  min-width: 760px;
}
/* We must define 100% width to avoid the body being too narrow for near-empty pages */
#center {
  float: left;
  width: 100%;
  padding: 10px 0 0;
}
/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
  margin-left: -210px;
}
body.sidebar-right #center {
  margin-right: -210px;
}
body.two-sidebars #center {
  margin: 0 -210px;
}
/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
  margin-left: 210px;
}
body.sidebar-right #squeeze {
  margin-right: 210px;
}
body.two-sidebars #squeeze {
  margin: 0 210px;
}
/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
  width: 210px;
  float: left;
  font-size: 75%;
  padding: 10px 0 0;
  z-index: 2;
  position: relative;
}
#sidebar-left .block {
  padding-right: 10px;
}
#sidebar-right .block {
  padding-left: 10px;
}
.sidebar .block {
  margin: 0 0 10px;
}
.block .content {
  padding: 2px 5px;
}
.sidebar .block .content {
  border: #CCC solid 1px;
}
#sidebar-left .block-region {
  margin-right: 10px;
}
#sidebar-right .block-region {
  margin-left: 10px;
}
.block-region {
  padding: 1em;
  background: transparent;
  border: 2px dashed #CCC;
  text-align: center;
  font-size: 1.2em;
}
/* Now we add the backgrounds for the main content shading */
#center .node h1,
#center .node h2,
#center .node h3 {
  border-bottom: #CCC solid 1px;
}
#center h1.title,
#center h2.title,
#center .block h2.title {
  color: #333;
  margin: 15px 0;
  font-weight: bold;
  letter-spacing: -1px;
  border: none;
}
#center h2.title a {
  color: #333;
}
.block h2 {
  height: 16px;
  color: #EEE;
  background: #CCC;
  font-size: 1em;
  font-weight: normal;
  text-align: left; /* LTR */
  line-height: 16px;
  margin: 0;
  padding: 0 5px;
}
.block h2 a,
.block h2 a:hover {
  color: #EEE;
  text-decoration: none;
}
.sidebar .block-1 .content {
  border: #C63 solid 1px;
}
.sidebar .block-2 .content {
  border: #999 solid 1px;
}
.sidebar .block-3 .content {
  border: #F96 solid 1px;
}
.sidebar .block-4 .content {
  border: #C96 solid 1px;
}
.sidebar .block-1 h2 {
  background: #C63;
}
.sidebar .block-2 h2 {
  background: #999;
}
.sidebar .block-3 h2 {
  background: #F96;
}
.sidebar .block-4 h2 {
  background: #C96;
}
#footer {
  float: left;
  width: 100%;
  font-size: 75%;
  border-top: 3px solid #C63;
  text-align: center;
  line-height: 1.5em;
  margin: 10px 0 0;
}
#mission {
  display: block;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
#search-theme-form {
  margin: 0 0 10px;
}
#search-theme-form label {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/**
 * Header
 */
#wrapper #container #header {
  color: #EEE;
  background: #C63;
}
#wrapper #container #header #slogan-floater h1.site-name {
  float: left; /* LTR */
  line-height: 1.2em;
  margin: 0 0 5px;
  padding: 0;
}
#wrapper #container #header #slogan-floater h1.site-name a {
  color: #EEE;
  background: #C63;
  font-weight: bold;
}
#wrapper #container #header #slogan-floater h1.site-name a:hover {
  text-decoration: underline;
}
#wrapper #container #header #slogan-floater .site-slogan {
  color: #EEE;
  background: #C63;
  font-size: 83%;
}

/**
 * Primary navigation
 */
#primary-links ul {
  display: block;
  float: right; /* LTR */
  color: #EEE;
  background: #C63;
  list-style: none;
  text-align: center;
  margin: 73px 0 4px;
  padding: 0;
}
#primary-links ul li {
  float: left; /* LTR */
  height: 20px;
  line-height: 20px;
  margin: 0 5px 0 0; /* LTR */
  padding: 0;
}
#primary-links ul li a {
  display: block;
  color: #EEE;
  background: #C63;
  text-decoration: none;
  padding: 1px 8px;
}
#primary-links ul li a:hover,
#primary-links ul li a.active {
  border: 1px solid #EEE;
  text-decoration: none;
  padding: 0 7px;
}


Comments

matt_harrold’s picture

No such thing as float:center in CSS.

Have a look at:

margin-left:auto;
margin-right:auto;

The CSS snippet you provided is a mess. I'd start again with an unmodified style.css.

Also, this post would probably get a better response if it was put in the issue queue for Contented7 (the theme), this is a general discussion section ... unlikely to find much help.