I am putting out a table with variable columns, so I need to do in html. When the table is rendered, it extends past the edge of the salesforce header. I've tried to adjust the column width in the <th> row by setting each column to 10% but can't seem to adjust any column widths. What is causing the table to go beyond the right margin of the header and how can I adjust it? Any help much appreciated.

Below is the VF, and the class definitions for the row wrapper follows that.

<apex:form >
  <apex:pageBlock id="budget">

      <apex:panelGrid columns="4" cellSpacing="10px">
         <apex:selectList label="Competency Owner" value="{!selectedCompetencyOwner}" size="1">
             <apex:selectOptions value="{!Owners}"/>
         </apex:selectList>
         <apex:commandButton value="Update" rerender="practices,budget"/>
         <apex:commandButton value="Resource Level" />
         <apex:commandButton value="Save"/>       
       </apex:panelGrid>

  <table class="list" border="0" cellpadding="0" cellspacing="0">
    <tr class="headerRow  ">
      <apex:repeat value="{!Headings.cellList}" var="h">
        <th width="10%">
           {!h.value}
        </th>
      </apex:repeat>
    </tr>

     <tr>
        <td align="right">
            {!InputLabel}
        </td>
       
         <apex:repeat value="{!inputRow.cellList}" var="i">        
            <td>
               <input type="text" value="{!i.value}" align="right"/>
           </td>
         </apex:repeat>
      
      </tr> 

   <apex:repeat value="{!Rows}" var="row">
       <tr>
         <apex:repeat value="{!row.cellList}" var="c">        
           <td align="right">
               {!c.value}
           </td>
         </apex:repeat>
       </tr>
    </apex:repeat>

  </table>
  </apex:pageBlock>
</apex:form>
</apex:page>

Row wrapper:

public class rowWrapper {
    public List<Cell> CellList{get;set;}
}


public class Cell {
    public String Value{get;set;}
    }