Tag <h:form> quebrando layout CSS (com primefaces)

Eu não sei porque bulhufas a tag <h:form> (assim como a tag <form>) está quebrando meu alinhamento em CSS. Quando faço desta maneira funciona tudo que fiz via CSS:

<p:panelGrid columns="1" id="index-pPanelgridUsuario">
  <p:outputLabel value="Usuário:" for="tfUsuarioNome"/>
  <p:inputText id="tfUsuarioNome"/>
  <p:outputLabel value="Senha:" for="tfUsuarioSenha"/>
  <p:inputText id="tfUsuarioSenha"/>
</p:panelGrid>

E quando incluo as benditas tags vira uma zona:

<h:form>
  <p:panelGrid columns="1" id="index-pPanelgridUsuario">
    <p:outputLabel value="Usuário:" for="tfUsuarioNome"/>
    <p:inputText id="tfUsuarioNome"/>
    <p:outputLabel value="Senha:" for="tfUsuarioSenha"/>
    <p:inputText id="tfUsuarioSenha"/>
  </p:panelGrid>
</h:form>

Reduzi meu CSS pra um simples comando de alinhamento e o miserento só funciona sem a tag form:

#index-pPanelgridUsuario {
    grid-column-start: 2;
    grid-column-end: 3;
}

Alguém pode me dar uma luz de como usar o CSS com essa tag simpática?