Visualforce page not occupying whole page

Question

I am using visualforce page for community self-registration. Somehow it only covers the half page which looks weird. Screenshot attched.

How can I fix this so that it occupies the whole page. Here is the visualforce code:

<apex:page id="communitiesSelfRegPage" showHeader="true" standardStylesheets="true" controller="CommunitiesSelfRegController" title="{!$Label.site.user_registration}">
 <apex:define name="body">      
<center>      
<apex:form id="theForm" forceSSL="true">

        <apex:pageBlock >
                    <apex:pageMessages id="error"/>
                   <apex:panelGrid columns="2" style="margin-top:1em;"> 
                      <apex:outputLabel value="First Name" for="firstName"/>
                      <apex:inputText required="true" id="firstName" value="{!firstName}" label="First Name"/>


                      <apex:outputLabel value="Last Name" for="lastName"/>
                      <apex:inputText required="true" id="lastName" value="{!lastName}" label="Last Name"/>


                      <apex:outputLabel value="{!$Label.site.community_nickname}" for="communityNickname"/>
                      <apex:inputText required="true" id="communityNickname" value="{!communityNickname}" label="{!$Label.site.community_nickname}"/>



                      <apex:outputLabel value="{!$Label.site.email}" for="email"/>
                      <apex:inputText required="true" id="email" value="{!email}" label="{!$Label.site.email}"/>



                      <apex:outputLabel value="{!$Label.site.password}" for="password"/>
                      <apex:inputSecret id="password" value="{!password}"/>



                      <apex:outputLabel value="{!$Label.site.confirm_password}" for="confirmPassword"/>
                      <apex:inputSecret id="confirmPassword" value="{!confirmPassword}"/>


                      <apex:outputText value=""/>
                      <apex:commandButton action="{!registerUser}" value="{!$Label.site.submit}" id="submit"/>
                      </apex:panelGrid> 
                   <br/>

           </apex:pageBlock>
       </apex:form>
      </center>

     <br/>
     </apex:define> 

  </apex:page>

Answer 1

The default mode for an apex:panelGrid is "no larger than necessary", the same behavior that you get with any sort of HTML <table>. You need to specify a width:

<apex:panelGrid width="100%" columns="2" style="margin-top:1em;"> 

You will also likely need to specify special CSS to get the columns to look right, so you might start from here:

<style>
.dataCol { width: 20% }
.valueCol { width: 80% }
.valueCol input { display: inline-block; width: 100% }
</style>
<apex:panelGrid columnClasses="dataCol,valueCol" width="100%" columns="2" style="margin-top:1em;"> 

Feel free to experiment with the results.