The heading widths are controlled in the stylesheet (stylesheet_chcategories_dressing.css in your case). You should rename stylesheet_categories_dressing.css to stylesheet_categories_dressing.bak, or delete it entirely, so it doesn't interfere with your styling.
Use negative left & right margins to pull the headings out to the full box width, and delete the width property.
You have used .catBoxHeading1 and .catBoxHeading2, when you really wanted both headings identical; put both selectors in the same rule and add xxx to the second rule to disable it. You can probably just delete the second rule.
Code:
.catBoxHeading1, .catBoxHeading2 {
font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
font-weight: normal;
font-size: 1.0em;
text-align:center;
width:100%; /*delete this line*/
color: #ffffff;
background-color: none;
background-image: url(../images/aqua/sidebox.gif); /*uncomment to use background image with or without coded text*/
/*height: 23px; */ /*uncomment to use background image without coded text*/
display: block;
padding:0;
margin: 0 -5px 0 -15px;
}
.catBoxHeading2xxx {
You need to give all the categories sort orders in their editing page (Catalog > Categories/Products > edit category). Set the sort orders as you want them to line up in the sidebox.