changing the width of my main page

I have searched and found a few posts here and there about changing the width of my main page.

I tried looking in the stylesheet. css file and did not find anything that mentioned the main wrapper as was alluded to in the posts.

Im desiring to make my page as wide as the banner that I have.

Anyone care to help a tecno caveman with this?
I thank you all ahead of time.

http://www.coilingdragon.com/store

Easy -

Find this in stylesheet.css:

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 945px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

and change the 945 to 1033.

How did I know the current width of your mainWrapper and your header image?

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. A very handy tool.

Thanks Ill give it a try

found the tool and used it to find exactly where the folder was I needed to access and change.

thank you for the help.

It is appreciated.

I tried several posts and this was the solution for me as well. Thank you!

Thanks!

Hi, Hope someone can help re width of page. I wanted a wider width so change to 950 px. This has worked for all main pages but category pages all appear over to the left. You can see the site https://www.ew-trading.com.
After trying the 100% changes in CSS which didn't work, I have changed in my css to

#mainWrapper{ background:url(../images/header.jpg) no-repeat top center; width:950px; padding:0px; margin:0px auto; position:relative; }

and also

body { margin:0; font-family: verdana, arial, helvetica, sans-serif; font-size: 62.5%; color: #FFF; background:#2b3c0d url(../images/bg_tile.jpg) top center; margin: auto; }

And this put the main pages in the alignment I wanted. But the pages in the cateogries (under the main navbar) are all over to the side - please can someonbe advise what to change or add to correct?

A few small questions too if anyone can help:

• I would like to move the Home and Log in small text and links at the top left (to far left) - does anyone know where this is in the coding as I can't find. (Twitter feed usually goes on the far right but have moved as pages now aligned wrong!)

-I want to add an SSL logo in the first sidebox on the right, any clue where that may be?

I have just been asked to make a few tweaks for a friend on this website so just gettiong what I need from the remote server and changing. I did not design, that was done elsewhere so not sure how different than custom (probably not much) but I have added header, backgrounds etc.

Apologies but I am a Zencart newbie, usually work with wordpress so still getting the hang of it.

Thanks in advance,
Jill Cripps
https://www.ew-trading.com
Zen Cart 1.3.8a
Database Patch Level: 1.3.8

You've got some serious problems with that template. It contains non-standard DIVs which are making it display oddly. Even the home page is odd here in Firefox, with that block in the top-left being partly off screen to the left yet causing no horizontal scroll bar to appear. As well, there's an inconsistency between the docType declaration and the code as generated by Zen Cart. ZC is XHTML compliant, yet your docType says it's HTML -- that generates 35 errors on the home page alone, and can confuse browsers. Where did the template come from?

As for the other questions, you'll get more answers asking them each in a separate question.

Rob

Was designed by a company for us but they went bust. I am finding it difficult to make changes. I don't have the know all to manipulate a new template...I can take the twitter widget away, have found that, maybe put details in a sidebox later. Any ideas how to fix this alignment issue, just for now? here is all the css...

/**

• Main CSS Stylesheet
• @package templateSystem
• @copyright Copyright 2003-2005 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
• @version $Id: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $
  */
  *{ font-family: verdana, arial, helvetica, sans-serif; }

body { margin:0; font-family: verdana, arial, helvetica, sans-serif; font-size: 62.5%; color: #FFF; background:#2b3c0d url(../images/bg_tile.jpg) top center; margin: auto; }

/GS Divs/
/div#wrapper{ background:url(images/header.jpg) no-repeat top center; width:950px; height:300px; padding:0px; margin:0px auto; position:relative; }/
div#panel_top{ background:/url(../images/panel_top.gif)/ no-repeat top center #333; border:solid 1px #CCC; width:950px; height:35px; padding:0px; margin:0px; /clear:both;/ }
div#panel{ /background:url(../images/panel_mid.gif) repeat-y top center;/ width:950px; padding:10px 0px 20px; margin:0px; }
div#panel_bot{ /background:url(../images/panel_bot.gif) no-repeat bottom center;/ width:950px; height:10px; padding:0px; margin:0px; }

a img { border: none; }
a, a:link, #navEZPagesTOC ul li a { color: #DDD; text-decoration: none; }
/a:visited { color: #777; text-decoration: none; }/
a:hover, #navEZPagesTOC ul li a:hover, navSupp ul li a:hover{ color: #FFF; }
a:active { color: #000; }
#navMain ul li a{ color:#f2e99e; }
#navMain ul li a:hover{ color:#FFF; }

/View larger image link/
.imgLink{ display:none; }

/*For credit card sidebox add-on */
#ccacceptContent {text-align:center; padding:10px 20px; line-height:1.5em;}

a span.category-subs-selected{ color:#FFF; border-bottom:1px solid #AAA; }

h1 { font-size: 1.4em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{ font-size: 1.1em; }
.biggerText { font-size: 1.2em; }
h1, h2, h3, h4, h5, h6 { margin: 0.3em 0; font-weight:normal; }

/GS Generals/
div.centerBoxWrapper img, div.centerBoxWrapper a img{ background:#FFF; padding:5px; border:1px solid #BBB; border-right:1px solid #111; border-bottom:1px solid #000; }

CODE { font-family: arial, verdana, helvetica, sans-serif; font-size: 1em; }
FORM, SELECT, INPUT { display: inline; font-size: 1em; margin: 0.1em; }
TEXTAREA { margin: auto; display:block; width: 98%; }
input:focus, select:focus, textarea:focus { background: #F0F8FF; }
FIELDSET { padding: 0.5em; margin: 0.5em 0em; border: 1px solid #cccccc; }
LEGEND { font-weight: bold; padding: 0.3em; color:#FFF; }
LABEL, h4.optionName { line-height: 1.5em; padding: 0.2em; }
LABEL.checkboxLabel, LABEL.radioButtonLabel { margin: 0.5em 0.3em; }
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg { float: left; }
LABEL.inputLabel { width: 11em; float: left; }
LABEL.inputLabelPayment { width: 15em; float: left; }
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel { width: 12em; float: left; }

P, ADDRESS { padding: 0.5em; }
ADDRESS { font-style: normal; }

.clearBoth { clear: both; }
HR { height: 1px; margin-top: 0.5em; border: none; border-bottom: 1px solid #9a9a9a; }

/warnings, errors, messages/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution { line-height: 1.8em; padding: 0.2em; border: 1px solid #000000; }
.messageStackWarning, .messageStackError { background: #ff0000; color: #ffffff; }
.messageStackSuccess { background: #99FF99; color: #000000; }
.messageStackCaution { background: #FFFF66; color: #000000; }

/wrappers - page or section containers/
/#mainWrapper { background: #ced3a6; text-align: left; width: 90%; vertical-align: top; border:solid 1px #edf5af; border-top:none; border-bottom:none; }/

#mainWrapper{ background:url(../images/header.jpg) no-repeat top center; width:950px; padding:0px; margin:0px auto;position:relative; }
#headerWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage { margin: 0em; padding: 0em; }
#logoWrapper { width:100%; /height:150px;/ text-align:center; padding-top:5px; }
#logo { /background:url(../images/logo.jpg) no-repeat;/ width:196px; height:150px; position:absolute; right:0px; top:18px; }
#logo img { display:none; }
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper { margin: auto; }
#navColumnOneWrapper{ margin-right:0; }
#navColumnTwoWrapper{ margin-left:0; }
#mainWrapper { margin: auto; }
.centerColumn{ margin: 1em 5px 0; background: #726559; border:#000 1px solid; padding:10px; font-size:1.2em; height:auto; /width:480px;/ width:540px; }
/#indexDefaultMainContent{ background:#726559; border:#000 1px solid; padding:10px; }/

#taglineWrapper { width:100%; display:none; }
#tagline { color:#FFF; font-size: 2em; text-align: center; padding:5px 450px 0 0; }
#sendSpendWrapper { border: 1px solid #cacaca; float: right; margin: 0em 0em 1em 1em; }
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper { margin: 0; width: 47%; }
.wrapperAttribsOptions { margin: 0.3em 0em; }

/navigation/
.navNextPrevCounter { margin: 0em; font-size: 1em; }
.navNextPrevList { display: inline; white-space: nowrap; margin: 0; padding: 0.5em 0em; list-style-type: none; }
.navNextPrevList a img{ border:none; }
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper { margin: 0em; font-weight: bold; height: 1%; width: 100%; /border:solid 1px #edf5af; border-left:none; border-right:none;/ }
#navMainWrapper{ }
#navCatTabsWrapper{ /background:#EEE; border-top:#111 solid 1px; border-bottom:#AAA solid 1px;/ padding-top:5px; }
#navMain ul, #navSupp ul, #navCatTabs ul { margin: 0; padding: 0.5em 0em; list-style-type: none; text-align: center; line-height: 1.5em; }
#navMain ul li, #navSupp ul li, #navCatTabs ul li { display: inline; }
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a { text-decoration: none; padding: 0em 0.5em; margin: 0; color: #CCC; white-space: nowrap; font-size:1.2em; }
#navCatTabs ul li a:hover { color:#FFF; }
#navSupp{ height:10px; }/GS/
#navSupp ul{ display:none; }/GS/

/GS/
div#categoriesContent{ font-size:1em; }
div#categoryDescription{ /width:400px;/ }
/Hidden headings/
#categoriesHeading, #bannerboxHeading{ display:none; }

#twitter-widget{ top:2px; left:-165px; position:absolute; width:240px; }

/GS Main Tabs/
div#navEZPagesTop{ width:950px; height:33px; padding:0px 10px; margin:0px; }
div#navEZPagesTop a{ background:/url(../images/tab_1.gif) no-repeat/ #222; border:solid 1px #CCC; display:block; float:left; padding:10px 3px; margin:0px 1px; width:105px; height:12px; text-align:center; color:#DDD; font-size:1.2em; text-decoration:none; }
div#navEZPagesTop a:hover{ text-decoration:underline; }
div#navEZPagesTop a.active{ background:/url(../images/tab_2.gif) no-repeat/ #333; color:#FFF; border-bottom:solid 1px #333; }

#navEZPagesTOCWrapper { font-weight: bold; float: right; height: 1%;border: 1px solid #000000; }
#navEZPagesTOC ul { margin: 0; padding: 0.5em 0em; list-style-type: none; line-height: 1.5em; }
#navEZPagesTOC ul li { white-space: nowrap; }
#navEZPagesTOC ul li a { padding: 0em 0.5em; margin: 0; }

#navCategoryIcon, .buttonRow, #indexProductListCatDescription { margin: 0.5em; }
#navMainSearch { float: right; }
#navBreadCrumb { margin:0em 0.5em; font-size: 1.2em; font-weight: normal; padding: 1em 0 0.8em 1em; background:#726559; border:#000 1px solid; }
#navEZPagesTop { /background:url(../images/link_cap_right.gif) #615e3d no-repeat bottom right;/ font-size: 1em; font-weight: bold; margin: 0em; padding: 0.5em 0 0.5em 1.5em; }
#headerWrapper { background:none; height:200px; }
#navColumnOne, #navColumnTwo { font-size:1.2em; }

/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert { vertical-align: top; }

/.content,/ #productDescription, .shippingEstimatorWrapper { /font-size: 1.2em;/ padding: 0.5em; }

/#productGeneral{ margin: 1em 0.8em 0; background: #726559; border:#000 1px solid; padding:10px; }/

.alert { color: #FF0000; margin-left: 0.5em; }
.important { font-weight: bold; }
.gvBal { float: right; }
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix { padding: 0.8em; }
.smallText, #siteinfoCredits, #siteinfoStatus, #siteinfoIP { font-size: 1em; }
#siteinfoLegal{ font-size:1.1em; background:#333; border:#EEE 1px solid; padding:0.8em 0; }
#siteinfoLegal, #siteinfoIP { color:eaffc4; }/GS/
#siteinfoLegal a, #siteinfoIP a{ color:eaffc4; }/GS/

/Shopping Cart Display/
#cartAdd { float: right; text-align: center; margin: 1em; border: 1px solid #000000; padding: 1em; }
.tableHeading TH { border-bottom: 1px solid #cccccc; color:#333; }
.tableHeading, #cartSubTotal { background: #e9e9e9; }
#cartSubTotal { border-top: 1px solid #cccccc; font-weight: bold; text-align: right; line-height: 2.2em; padding-right: 2.5em; color:#000; }
.tableRow, .tableHeading, #cartSubTotal { height: 2.2em; }
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay { padding: 0.5em 0em; border:none; }
.cartUnitDisplay, .cartTotalDisplay { text-align: right; padding-right: 0.2em; }
#scUpdateQuantity { width: 2em; }
.cartQuantity { width: 4.7em; }
.cartNewItem { color: #FFF; position: relative; /do not remove-fixes stupid IEbug/ }
.cartOldItem { color: #EEE; position: relative; /do not remove-fixes stupid IEbug/ }
.cartBoxTotal { text-align: right; font-weight: bold; }
.cartRemoveItemDisplay { width: 3.5em; }
#cartAttribsList { /* for Zen Cart version 1.3.0 - 1.3.0.2 / margin-left: 1em; }
.cartAttribsList { // for Zen Cart versions 1.3.5+ */ margin-left: 1em; }
#mediaManager { width: 50%; margin: 0.2em; padding: 0.5em; }
.normalprice, .productSpecialPriceSale { text-decoration: line-through; }
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount { color: #ff0000; }
#cartBoxListWrapper ul, #ezPageBoxList ul { list-style-type: none; }
#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal { margin: 0; padding: 0.2em 0em; }
.totalBox { width: 5.5em; text-align: right; padding: 0.2em; }
.lineTitle, .amount { text-align: right; padding: 0.2em; }
.amount { width: 5.5em; }

/Image Display/
/#productMainImage,/ #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage { margin: 0em 1em 1em 0em; }
#productMainImage{ margin:0; }
#cartImage { margin: 0.5em 1em; }

/Attributes/
.attribImg { width: 20%; margin: 0.3em 0em; }

/list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew { margin: 1em 0em; }

/sideboxes/
h3.leftBoxHeading, h3.rightBoxHeading { /border:#000 1px solid;/ text-align:left; }
h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label { color: #FFF; /background:#8d2820;/ }
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{ text-decoration:underline; }
.leftBoxHeading, .rightBoxHeading { /margin: 0; background:url(../images/sidebox_header_bg.gif) #615e3d no-repeat;/ padding:0.2em 0.5em; }
.centerBoxWrapper, .content{ margin: 0 0 0.8em 0; background:#766b5f; border:#000 1px solid; padding:10px; }
#indexDefault, #indexCategories{ background:none; border:none; padding:0px; }
#ezPageDefault{ margin: 1em 0.8em 0; background:/**/ #726559; border:#000 1px solid; padding:10px; }
.centerBoxHeading { margin: 0; /height:32px;/ /background:url(../images/title_cap_right.gif) #615e3d no-repeat top right;/ padding: 0.5em 0.2em; }
.leftBoxContainer, .rightBoxContainer { margin-top: 0px; background:#565638; border:#000 1px solid; }
/GS Specials/
#specials{ background:none; border:none; padding:0; }
#specials img{ margin:0; }
div#specials div.sideBoxContent{ background:#565638; border:#000 1px solid; margin:0.8em 0 0 0; padding:0; }
#specialsHeading{ text-align:center; }
/GS Specials END/
/GS Featured/
#featured{ background:none; border:none; padding:0; }
#featured img{ margin:0; }
div#featured div.sideBoxContent{ background:#565638; border:#000 1px solid; margin:0.8em 0 0 0; padding:0; }
#featuredHeading{ text-align:center; }
/GS Specials END/
.sideBoxContent { /background:url(../images/sidebox_content_bg.gif) #615e3d no-repeat bottom;/ padding: 0.8em; }
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg { text-align: center; }

.productListing-data, .navSplitPagesResult { padding: 10px 0; }
#cartBoxEmpty, #cartBoxVoucherBalance { font-weight: bold; }

#bestsellers .wrapper { margin: 0em 0em 0em 1.5em; }
#bestsellers ol { padding: 0; margin-left: 1.1em; }
#bestsellers li { padding: 0; margin: 0.3em 0em 0.3em 0em; }

.orderHistList { margin: 1em; padding: 0.2em 0em; }

#bannerboxHeading { background: #0000CC; }
#upProductsHeading { text-align: left; }
#upDateHeading { text-align: right; }

/misc/
.back { float: left; }
.forward { float: right; }
.bold { font-weight: bold; }
.rowOdd { background: #E8E8E8; height: 1.5em; vertical-align: top; color:#333; }
.rowEven { background: #F0F0F0; height: 1.5em; vertical-align: top; color:#333; }
/Added by GS/
.rowOdd a, .rowEven a { color:#111; }
.rowOdd a img, .rowEven a img { border:none; }
/Added by GS End/
.hiddenField { display: none; }
.visibleField { display: inline; }
CAPTION { /display: none;/ }
#myAccountGen li, #myAccountNotify li { margin: 0; }
.accountTotalDisplay, .accountTaxDisplay { width: 20%; text-align: right; /vertical-align: top/ }
.accountQuantityDisplay { width: 10%; vertical-align: top }
TR.tableHeading { background: #cacaca; height: 2em; }
#siteMapList { width: 90%; float: right; }
.ratingRow { margin: 1em 0em 1.5em 0em; }
LABEL#textAreaReviews { font-weight: normal; margin: 1em 0em; }
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp { background: #ffffff; }

Taking away the Twitter widget would be a good start. It can easily be put in a sidebox later. (Check out the Blank Sidebox mod under Free Software Add Ons, link top-left of this page. There may be Twitter sideboxes already made for you there too.)

Take that widget out and repost when you've done that. It just may solve your problem.

Rob

Thanks, tried to remove from css but then it still apears towards centre of page, no idea where it is on remote server.

I have found and romoved twitter widget but still those pages are not aligned. Is there anything else I can try in that css I posted?

I'm not 100% sure what problem(s) we're trying to fix, but if it's the fact that the center section sticks out to the right on product listing and product info pages, try removing the width statement from the .centerColumn rule in the stylesheet.

Lots of Zenners get in trouble trying to control the width of every section of the page, when Zencart does a pretty good job by itself.

I notice that there are 3 DIVs in your site which are non-standard: panel_top, panel, and panel_bot. But it looks like they are just there to hold graphics as background images, so I can't see that that would be a problem.

I compared the settings in your stylesheet for width on various elements to a stylesheet for my retail site (v1.3.9h, modified). There seem to be several more width settings in yours, including a few that may be attempts to "fix" width errors in other browsers (meaning IE) which may not be necessary now. I would look for redundant width definitions and remove them, allowing the normal cascade of CSS to take place.

This will be an iterative process. Remove things that may not be necessary, check the result, repeat. When you get things too loose, put back. Figuring out someone else's custom template is going to be frustrating and time-consuming I'm afraid.

You can do this on the live site without making permanent changes using the Firebug plug-in for Firefox. Highly recommended.

Rob

And while I was writing that, Steve came in and said the same thing more succinctly. ;-)

Thank you both. I removed the width in centre column but didnt change anything. Yes, the width is how I want on the home pages and all pages on top navbar but incorrect on the lower navbar pages. have been trial and error changing to no avail but will carry on!

Go through all your category-specific stylesheets (english_c_70.css, etc.) and remove the width statement from the #mainWrapper rule.

And then you might want to look in to optimizing your images - they're all way too big (file size, not dimensions) and slow the page load down.

This is really odd. If I remove it the home pages (and top nav pages) just go to the very far left, the other pages stay where they are over to the right, same if I put 100% instead of 950px, must be an issue somewhere else, have tried all I can think of, any other ideas? I posted the full stylesheet I have. At a loss. (Checked all the stylesheets)

Ok, changed all the css files that you mentioned and actually 2 of the pages on the lower navbar have corrected, but rest still out of alignment....curioser....so much for my friday!! Any idea why this might have corrected just 2 pages?

Added 950px in all css files and the below to each and seems to have corrected on all pages! Hope all this may help someone else and thank you - wouldn't have got there myself I dont think!

margin: auto;

Cheers guys, now can move on to sorting the rest of the mess out!!
Jill

You don't need to remove all instances of that width, just the ones in the category-specific stylesheets, and any redundant ones in the main stylesheet. As a general rule, no such site-wide definition should be duplicated in category-specific stylesheets; they should only contain the changes necessary for a particular category.

Also, a hint. From time to time during this debug process, clear your browser's cache. Stylesheets are sometimes not reloaded with a simple page refresh, in some browsers, some of the time.

Rob

Oops. You've been doing while I've been thinking. I assume the margin:auto is helping a lot. Try removing the now redundant width declarations in the category-specific stylesheets, leaving only those in the main stylesheet. Or, leave well enough alone. ;-0