subTable desalinhado

<rich:dataTable width="300" id="col" rows="20" columnClasses="col" value="#{pessoaBean.allPessoa}" binding="#{pessoaBean.dataTable}" var="pessoa">
													
							<f:facet name="header">
								 <rich:columnGroup>  
									<rich:column>  
				                   		 <b><h:outputText styleClass="headerText" value="NOME" /></b>
				                    </rich:column>  				            
				                    <rich:column>  
				                   		 <b><h:outputText styleClass="headerText" value="CACHORRO" /></b>				                   		
				                    </rich:column>  	
				                    <rich:column>  
				                   		 <b><h:outputText styleClass="headerText" value="RAÇÃO" /></b>				                   		
				                    </rich:column>  	
				                   	<rich:column>  
				                   		 <b><h:outputText styleClass="headerText" value="AÇÃO" /></b>				                   		
				                    </rich:column>  		                  
				                 </rich:columnGroup>
				            </f:facet>
									   					
							<rich:column> 
								<h:outputText value="#{pessoa.nome}" />
							</rich:column>			
								
							<rich:column> 
								<h:outputText value="#{pessoa.cachorroPessoa.nomeCachorro}" />
							</rich:column>		
											
							<rich:subTable value = "#{pessoa.racaoCachorro}" var= "subObjeto"> 
					   			<rich:column>			 	
						   			<h:outputText value="#{subObjeto.nomeRacao}" />
						   		</rich:column>	
				   			</rich:subTable>
				   						
							<rich:column>			
								<a4j:commandButton value=" X " action="#{pessoaBean.excluirRegistroLista}"></a4j:commandButton>		
								<a4j:commandButton value=" - " action="#{pessoaBean.editRegistro}"></a4j:commandButton>
							</rich:column>
	
						</rich:dataTable>