Problemas com background, apenas bordas colorindo

Front-end CSS
#1

Bom dia,

Preciso da ajuda de vocês com o background-color, estou setando a cor da mesma, porém, somente as bordas estão colorindo, alguem sabe o motivo? Creio que seja simples.

Segue abaixo código e imagens:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<style>
		.Bimage{background-color: gray;}
		body {background-color: #a8d9dc;}
	</style>
</h:head>
<h:body>
	<h:form id="form">
		<p:layout fullPage="true">
			<p:layoutUnit position="north" size="100">
			
				<p:outputLabel>Bem vindo ao sistema CALC-ME, </p:outputLabel>
				<p:outputLabel value=" #{usuarioBean.usuario.nome}"></p:outputLabel>
				<p:graphicImage url="/imgs/logo-editada.jpg" width="140px"
					height="70px" style="position: absolute; bottom:10px; left:610px;"></p:graphicImage>
				<p:commandLink value="Sair"
					style="position: absolute; bottom:10px; left:1110px;" action="#{usuarioBean.encerraSessao()}"></p:commandLink>
			</p:layoutUnit>
			<p:layoutUnit position="west" size="200" style="background: #a8d9dc;">
				<p:outputLabel>Resumo:</p:outputLabel>
				<br />
				<h:panelGrid id="pLogin" cellspacing="10" styleClass="Bimage" columns="3"
					style="position: absolute;top:140px; left: 450px;">
						
				</h:panelGrid>
			</p:layoutUnit>

			<p:layoutUnit position="center" size="300"
				style="background: #a8d9dc;">
				
				<h:panelGrid id="pLogin2" cellspacing="10" 
					bgcolor="a8d9dc" columns="3"
					style="position: absolute;top:140px; left: 250px;">
				
					<p:outputLabel>Rendas:</p:outputLabel>
					<p:inputText  style="color:#03d635;" readonly="true" value="#{rendaBean.retornaRenda()}" />
					<br />
					<p:outputLabel>Despesas:</p:outputLabel>
					<p:inputText style="color:#e90202;" readonly="true"
						value="#{despesaBean.retornaDespesa()}" />
					<br/>
					<p:outputLabel>Total Liquido:</p:outputLabel>
					<p:inputText style="color:#2d43e7" readonly="true"
						value="#{usuarioBean.calculaTotalLiquido()}" />
					<br/>
					<br></br>
					<p:outputLabel>Poupança VAR 1:</p:outputLabel>
					<p:inputText  style="color:#03d635;" readonly="true" value="#{poupancaBean.retornaPoupancaVar1()}" />		
					<br />
					<p:outputLabel>Poupança VAR 2:</p:outputLabel>
					<p:inputText  style="color:#03d635;" readonly="true" value="#{poupancaBean.retornaPoupancaVar2()}" />		
					<br />
				
				</h:panelGrid>
			</p:layoutUnit>

	<p:layoutUnit position="east" size="100" closable="true"
				collapsible="true">
				
				</p:layoutUnit>

			<p:dock position="bottom">
				<p:menuitem value="Home" icon="/imgs/home.jpg"
					url="/faces/inicio.xhtml" />
				<p:menuitem value="Rendas" icon="/imgs/rendas.jpg"
					url="/faces/cadastroRenda.xhtml" />
				<p:menuitem value="Despesas" icon="/imgs/despesa.jpg"
					url="/faces/cadastroDespesa.xhtml" />
				<p:menuitem value="Poupança" icon="/imgs/unnamed.jpg" url="/faces/cadastroPoupanca.xhtml" />
				<p:menuitem value="Usuário" icon="/imgs/usuario.jpg" url="/faces/Usuario.xhtml" />
			</p:dock>
			<p:outputLabel></p:outputLabel>
		</p:layout>
	</h:form>
</h:body>
</html>

IMAGEM:

Screenshot_3.jpg271×559 6.7 KB

No caso eu precisaria que esse espaço branco, fosse preenchido com a cor azul claro.(conforme as cores das bordas).

#2

Alterar o css do Primefaces não é tão simples assim. Dá um inspect no component, que verá que deve ter outras classes interna e seu CSS está aplicando apenas na camada acima