<p:wizard> Problem

[eduardomd]

Hi everyone, I'm using primefaces 2.2.1 and JSF 2.0

I don't know why my "tab" is like far from my form check the image

http://imageshack.us/photo/my-images/17/primefaces.png/


check my template.xhtml

<h:form>
<p:wizard>
<p:tab id="ws" title="biscoito">
<h:panelGrid columns="4">
<h:outputLabel value="Nome"/>
<p:inputText value="#{clienteBean.c1.nome}"/>

<h:outputLabel value="Sobrenome"/>
<p:inputText value="#{clienteBean.c1.sobrenome}"/>

<h:outputLabel value="Nascimento"/>
<p:inputMask mask="99.99.9999" value="#{clienteBean.c1.nascimento}"/>

<h:outputLabel value="RG"/>
<p:inputText value="#{clienteBean.c1.rg}"/>

<h:outputLabel value="CPF"/>
<p:inputText value="#{clienteBean.c1.cpf}"/>
<h:outputLabel value="Estado"/>
<p:inputText value="#{clienteBean.c1.estado}"/>

<h:outputLabel value="Cidade"/>
<p:inputText value="#{clienteBean.c1.cidade}"/>

<h:outputLabel value="Endereço"/>
<p:inputText value="#{clienteBean.c1.endereco}"/>

<h:outputLabel value="Numero da Residência"/>
<p:inputText value="#{clienteBean.c1.numero}"/>

<h:outputLabel value="Email"/>
<p:inputText value="#{clienteBean.c1.email}"/>

<h:outputLabel value="Telefone"/>
<p:inputText value="#{clienteBean.c1.telefone}"/>

<h:outputLabel value="Celular"/>
<p:inputText value="#{clienteBean.c1.celular}"/>

<h:outputLabel value="Data de Cadastro"/>
<p:inputMask value="#{clienteBean.c1.cadastro}" mask="99.99.9999"/>


</h:panelGrid>
<h:panelGrid columns="2">
<p:commandButton value="Gravar Dados" action="#{clienteBean.inserir()}" />
<p:commandButton value="Cancelar Operação" action="faces/template.xhtml" onclick="template"/>
</h:panelGrid>
</p:tab>
</p:wizard>
</h:form>