Css with ID does not work within <h:form>

Question

I put ID on a button inside a form but its CSS is not working

CSS:

#Conf{
    width: 30%;
}

#OutNU{
    margin-right: 15%;
    width: 30%;
}

HTML:

<p:panel id="ForgPasswd" style="width: 400px; margin: 0 auto;">
      <f:facet name="header">
          <p:graphicImage url="imagens/loginKey.png" width="20px" height="20px"  />
          <p:outputLabel value=" Recuperar Senha"/>
      </f:facet>
      <h:form>
          <p:growl id="growl" showSummary="false" showDetail="true" autoUpdate="true" life="5000" />

          <p:outputLabel value="Digite o email cadastrado:" for="email"/> <br/>
          <p:inputText style="width: 80%" id="email" value="#{forgPasswdBean.email}" required="true" requiredMessage="Favor informar seu email."/> <br/> <br/>

          <p:fieldset style="text-align: center">
              <p:commandButton id="OutNU" value="Voltar" oncomplete="window.location.assign('index.xhtml');" icon="ui-icon-arrowreturnthick-1-w"/>
              <p:commandButton id="Conf" value="Gerar nova senha" action="#{forgPasswdBean.enviarEmail()}" onclick="PF('process').show();" oncomplete="PF('process').hide();" icon="ui-icon-locked"/>
          </p:fieldset>   
      </h:form>
  </p:panel>

The CSS file is already referenced in the header