How to Remove Unintended Horizontal Scroll Bar

Hi, I have an unintended horizontal scroll bar on my site because for some reason, the width defaults to several pixels wider than the browser screen, no matter what resolution.

Apple iPhone Review

Any suggestions on how to remove it?

Thanks for your help as always.

Chris

You can’t have an element set to width: 100% and have left-right padding/margin on it too. You have this on quite a few elements. For outer elements, just use width: 100%, and for inner ones, remove the width setting and just use the padding. Here are some examples of rules with that problem:

#header {
  background: url("http://www.appleiphonereview.com/wp-content/themes/Apple%20iPhone%20Review/images/headerbg.gif") repeat-x scroll 0 -10px transparent;
  height: 78px;
  margin: 0;
  padding: 5px 0 0 2px;
  width: 100%;
}

#footer {
  background: url("http://www.appleiphonereview.com/wp-content/themes/Apple%20iPhone%20Review/images/footerbg.gif") repeat-x scroll 0 0 transparent;
  border-color: #CCCCCC #999999 #999999 #CCCCCC;
  border-right: 1px solid #999999;
  border-style: solid;
  border-width: 1px;
  height: 56px;
  margin: 0 0 2px;
  padding: 0 5px 0 0;
  width: 100%;
}


#subnav_body {
  line-height: 16px;
  margin: 0 auto;
  padding: 0 5px;
  width: 100%;
}

#header_body {
  height: 78px;
  margin: 0 auto;
  min-width: 780px;
  padding: 0 0 0 5px;
  width: 100%;
}

#topstrip_body {
  margin: 0 auto;
  padding: 0 5px;
  width: 100%;
}

Seems to have worked. Thanks so much, Ralph! This had been bugging me for some time.

Fantastic! Glad it was that easy. :slight_smile: