Primefaces LayoutUnit does not expand when browser window is maximised - html

Question

I have a Layout consisting of a north LayoutUnit containing a banner, a west LayoutUnit containing a vertical menu, and a central Layoutunit containing the main page content.
When I open a page with the browser minimised (e.g. browser width is half of the pc screen width) then it displays as much as it can in the view. However, if I then maximise the browser, it doesn't expand the content in the central LayoutUnit (see attached picture).
The code for the Layout is as follows:
<h:body>
<p:layout style="margin: 0px; gutter: 0px !important!" fullPage="false" >
<p:layoutUnit position="north" size="80" resizable="false" closable="false" collapsible="true" gutter="0" >
<div style="background-image: url('../resources/images/veges.jpg'); height: 80px; "> </div>
</p:layoutUnit>
<p:layoutUnit position="west" size="210" resizable="false" closable="false" collapsible="false" gutter="0">
<h:form id="menuForm">
<p:menu style="width:180px">
<p:menuitem value="Home" outcome="WelcomeMember" icon="fa fa-home" />
</p:menu>
<p:menu style="width:180px" toggleable="true">
<ui:include src="menu.xhtml" />
</p:menu>
<p:menu style="width:180px">
<p:menuitem value="Sign Out" action="#{loginBean.doLogout()}" icon="fa fa-sign-out" />
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" collapsible="false" resizable="true" gutter="0" >
<ui:insert name="pageContent" >
This is the default page content
</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
Does anyone know why this is happening and what I need to do to correct it?