Centralizar h:panelGrid dentro de um p:panel

Front-end
#1

Olá pessoal, O problema acontece com telas menores. O panelGrid fica de “fora” do p:panel.

Tenho o seguinte código:

<p:dataGrid var="b" value="#managedBean.retornaList()}"					
				columns="25" layout="grid"
				style=" margin:22px 0px 5px 0px ;margin-top:20px;text-align: center;">
				
				<f:facet name="header">
				</f:facet>
				<p:panel style="margin: 0 auto; text-align: center;">					
					<h:panelGrid columns="1" style=" margin: 0 auto;background:red;text-align: center;">								
					

					</h:panelGrid>						
				</p:panel>
			</p:dataGrid>

Gostaria que o h:panelGrid ficasse centralizado ao p:panel.

grid

#2

tentei colocar um align:center no css do grid, mas nao funcionou…

.ui-grid-row {	
display: flex;
flex-wrap: wrap;

}

a medida que diminui a tela o h:panelGrid vai ficando fora do p:panel Se alguém puder dá uma dica agradeço.