Hello, New Version of SitePoint!

I'm back again with another brain buster! For some reason, the tables on my landing pages align well to the right side, but they appear to have trouble fitting on the left side.

Here are the styles in question (lines 175-287):
Code:
/* -------------------------------------------- *\
    table .rating
\* -------------------------------------------- */
.tablewrap {
    display:table;
	padding:8px 0 16px;
}
table.categories {
    border-spacing:0;   /* border-spacing: is the equivalent of the cellspacing attribute only better. */
    border-left:2px solid #ccc;    /* specifiying border properties (esp. color) makes them cross-browser consistent... */
    border-top:2px solid #ccc;     /* the shading of border-style: inset, outset, groove, and ridge vary considerably between browsers */
    border-right:2px solid #999;
    border-bottom:2px solid #999;
    margin:0 auto;
    width:70%;
}
.categories th,
.categories td {    /* these borders are also applied to the cells in the .rating (inner) table. */
    border-left:2px solid #999;
    border-top:2px solid #999;
    border-right:2px solid #ccc;
    border-bottom:2px solid #ccc;
 /* FYI: if {padding:0;} were applied here, it would be the equivalent of the cellpadding="0" attribute except that it would apply to all cells in both tables. */
}
.categories th {     /* Styles the title bar */
    font-size:1.5em;
    font-family:Georgia,serif;
    padding:6px 0;
}
.categories td.catcol1,    /* the .catcols are .categories columns */
.categories td.catcol2 {
    vertical-align:middle;
    font-weight:bold;
    font-family:Arial,sans-serif;
    text-align:center;
    padding:0 6px;
}
.categories td.catcol1 {
    border-right:0;    /* removes a border in .catcol1 that was globally applied. */
}
.categories td.catcol2 {
    border-left:1px dotted #aaa;    /* alters a border in .catcol2 that was globally applied. */
}
.categories td.catcol3 {
    border:0;    /* removes the borders inside .catcol3 that were globally applied. */
    background-color:#999;   /* background-color in case .ratings lifts from bottom because text wraps or is zoomed excessively. */
    padding:0;
}
.catcol2 {
    height:68px;    /* table-cells treat height as min-height.  This value is applied to approximately "equalize" the height of the .categories rows *because* Opera and Chrome will not equalize the height of these cells *because* the table height is set by the contents of the taller 3rd column cell that uses rowspan. */
    height:60px;    /* (Yes, this value overrides the one above it.  Comment out or delete this one to try the previous.  Experiment.)  At 60px, the bottom row is a little taller than the top 3 in Opera and Chrome but this will allow a little more text to wrap or zoom larger before the .ratings table lifts from the bottom. */
}
.catcol3 {
    vertical-align:top;
/*    width:40%;    /* Set a default width for table.ratings at wider .categories widths. The min-width applied to .ratings td {min-width:4.125em} will win at narrow widths. */
}

/* This is the inner table with the graphs */
table.ratings {
    width:100%;
    border-spacing:0;   /* border-spacing is the equivalent of the cellspacing attribute only better */
    font-weight:bold;
    font-family:Arial,sans-serif;
}
.ratings td {
    background-color:#fff;   /* background-color of the .rating cells, if desired. */
    text-align:center;
    min-width:4.125em;   /* if desired; value depends on min width allocated to text in .ratrow1 */
    width:33.3%;    /* Equalizes the width of the .ratings columns.  !IMPORTANT! This number MUST be adjusted to match the number of graphs!!! 4 graphs at 25% each, 3 graphs at 33% each, etc. */
}

/* .ratrow1 td cells hold the name of the graph. */
.ratingrow1 td {
    height:40px;       /* the minimum height of the .quality row */
    padding-bottom:2px;
    border-bottom:0;    /* this deletes the bottom border from the .quality cells */
}

/* .ratrow1 td span allows the rating number to be styled uniquely */
.ratingrow1 td span {
    display:block;
    font-size:1.2em;    /* set the size of the numerical rating here */
}

/* ratrow2 td cells hold the graph elements. */
.ratingrow2 td {
    border-top:0;    /* this deletes the top border from the .graph cells */
    vertical-align:bottom;
}

/* These are the graph elements */
.graph {
    height:240px;      /* same as the height of the colored bar and yaxis images */
	width:54px;
    position:relative;   /* creates a stacking context for the elements inside the .ratings table cells (because table cells cannot be positioned). */
    overflow:hidden;
}
.yaxis {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:url('yaxis.gif') no-repeat 100% 100%;   /* 180x240 */
}
.bar {
    width:100%;
    height:100%;
    position:absolute;
    right:25px;    /* offsets the right edge of the colored bar */
    bottom:0;
    background:url('bar.gif') repeat-x 0 100%;
}