Meu componente não fica na posição correta

bom, adicionei no meu projeto um arquivo reset.css. e quando abri um formulário, meu componente não ficou na posição correta que era para ficar antes. Ou seja, somente os componentes que faz parte do combobox.

meu xhtml e css.

<ui:composition template="/WEB-INF/template/layoutPadrao.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui">
<f:metadata>
	<o:viewParam name="modelocarros" value="#{cadastroModeloCarroBean.modeloCarro}" />
	<f:event listener="#{cadastroModeloCarroBean.inicializar}" type="preRenderView" />
</f:metadata>

<ui:define name="titulo">#{cadastroModeloCarroBean.editando ? 'Editando Carro' : 'Novo Carro'}</ui:define>

<ui:define name="corpo">

	<h1>#{cadastroModeloCarroBean.editando ? 'Editando Carro' : 'Novo Carro'}</h1>

	<h:form id="frmCadastro">
    	<p:messages id="messages" autoUpdate="true" closable="true" />
    	
    	<p:toolbar style="margin-top: 20px">
    		<p:toolbarGroup>
    			<p:commandButton action="#{cadastroModeloCarroBean.salvar()}" value="Salvar" id="botaoSalvar"  update="frmCadastro"/>
    		</p:toolbarGroup>
    		<p:toolbarGroup align="right">
				<p:button value="Pesquisa" outcome="pesquisaModeloCarro" />
			</p:toolbarGroup>
    	</p:toolbar>
    	
    	<p:panelGrid columns="2" id="painel" style="width: 100%; margin-top: 20px" columnClasses="rotulo, campo">
    		<p:outputLabel value="Código" for="codigo" rendered="#{cadastroModeloCarroBean.modeloCarro.existente}" />
    		<p:inputText id="codigo" value="#{cadastroModeloCarroBean.modeloCarro.codigo}" size="20" 
    					 maxlength="20"  readonly="true" rendered="#{cadastroModeloCarroBean.modeloCarro.existente}" />
    		
    		<p:outputLabel value="Fabricante" for="fabricante"/>
    		<p:selectOneMenu id="fabricante" value="#{cadastroModeloCarroBean.modeloCarro.fabricante}" style="width: 170px" required="true" >
    			<f:selectItem itemLabel="Selecione o fabricante"  noSelectionOption="true" />
    			<f:selectItems value="#{cadastroModeloCarroBean.fabricantes}" var="fabricante"
    						   itemLabel="#{fabricante.nome}" itemValue="#{fabricante}" />
    		</p:selectOneMenu>
    		
    		<p:outputLabel value="Modelo" for="modelo"/>
    		<p:inputText id="modelo" value="#{cadastroModeloCarroBean.modeloCarro.nome}" size="60" maxlength="80"  required="true"/>
    	
    		<p:outputLabel value="Categoria" for="categoria"/>
    		<p:selectOneMenu id="categoria"  value="#{cadastroModeloCarroBean.modeloCarro.categoria}" style="width: 170px" required="true" >
    			<f:selectItem itemLabel="Selecione a categoria" noSelectionOption="true" />
    			<f:selectItems value="#{cadastroModeloCarroBean.categorias}" var="categoria" itemLabel="#{categoria.descricao}" itemValue="#{categoria}" />
    		</p:selectOneMenu>
    	</p:panelGrid>
	</h:form>
</ui:define>

</ui:composition>

meu CSS

.rotulo {
	width: 120px;
	text-align: center;
}

Estou usando rotulo e campo como estou seguindo uma vídeo aula, não foi feito campo e estava normal.

Topicos relacionados