How to set pageBlockSection with 2 columns equally spacing in the Vf page

Question

I am using pageBlockSection with columns as 2 and inside this block I am using panel group. The issue I am facing is that there are 2 page block section in my code but the first page block section containing 2 columns are not equally distributed(1st column-40% and 2nd - 60%). However in the second page block section I am using the same attributed but the columns are equally divided. Can any one suggest me how to maintain this equality ie 50-50 column. I have attached the code an screen UI for better understanding. NOTE:- I have also checked with pageBlockSectionItem instead of panelgroup but the result was still same.

<apex:page standardController="Voucher__c"  recordSetVar="comp" extensions="vExtention" docType="html-5.0" lightningstylesheets="true"> 
<style>
  .pannelConfigs {
    margin-left: 50px;
  }
    
    .memSpace{
    margin-left: 25px;
    }
     .memSpaceSmall{
    margin-left: 10px;
    }
    .memSpaceType{
    margin-left: 48px;
    }
   
</style>
<apex:form id="formMsg">
<apex:pageBlock title="Main Block" rendered="{!displaySuccess == False}" mode="edit">

<apex:pageBlockSection id="contentSection" title="Content Section" columns="2">
   
    <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Type1"  />
        <apex:outputText value="Type1 Data" styleClass="memSpace" /> 
        <br/><br/>
    </apex:panelGroup>
    
    <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Status" />
 <apex:outputText value="New" styleClass="memSpace"/>
         <br/><br/>
    </apex:panelGroup>
     <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Category" />  
       <apex:inputField value="{!vou.category__c}" styleClass="memSpace" required="false" />
       <br/><br/> 
    </apex:panelGroup>
           
 <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Range"  />
    <apex:inputField value="{!vou.Range__c}" styleClass="memSpace"/>
         <br/><br/>
    </apex:panelGroup>
   
  
    <apex:panelGroup styleClass="pannelConfigs">
        <apex:outputLabel value="Type "/>
    <apex:inputField value="{!vou.Type__c}" styleClass="memSpaceType">
                <apex:actionSupport event="onchange" action="{!getType}"  />
        <br/><br/>
    </apex:inputField>
    </apex:panelGroup>
   
    </apex:pageBlockSection>
  
    <apex:pageBlockSection id="voucher" title="Voucher" rendered="{!displayVoucher}" columns="2"  >
   
    <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Voucher 1"  />
 <apex:inputField value="{!vou.Voucher_1__c}" styleClass="memSpaceSmall" /> 
        <br/><br/>
    </apex:panelGroup>
        
    <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Voucher Amount 1" />
<apex:inputField value="{!vou.Voucher_Amount_1__c}" styleClass="memSpaceSmall" />
        <br/><br/>
        </apex:panelGroup>
        
         <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Voucher 2"  />
 <apex:inputField value="{!vou.Voucher_2__c}" styleClass="memSpaceSmall" /> 
             <br/><br/>
    </apex:panelGroup>
    
    <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Voucher Amount 2" />
<apex:inputField value="{!vou.Voucher_Amount_2__c}" styleClass="memSpaceSmall"/>
        <br/><br/>
        </apex:panelGroup>
        
         <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Voucher 3" />
 <apex:inputField value="{!vou.Nb_Voucher_3__c}" styleClass="memSpaceSmall" /> 
             <br/><br/>
    </apex:panelGroup>
    
    <apex:panelGroup styleClass="pannelConfigs">
    <apex:outputLabel value="Voucher Amount 3" />
<apex:inputField value="{!vou.Voucher_Amount_3__c}" styleClass="memSpaceSmall" />
        <br/><br/>
        </apex:panelGroup>
    
    
    </apex:pageBlockSection>
  
 </apex:pageBlock>
</apex:form>
</apex:page>

Answer 1

Don't use apex:panelGrid inside of an apex:pageBlockSection. The apex:pageBlockSection expects a certain format of its child elements, which is automatically handled by specifying the fields directly:

<apex:pageBlockSection id="contentSection" title="Content Section" columns="2">
    <apex:pageBlockSectionItem>
        <apex:outputLabel value="Type1"  />
        <apex:outputText value="Type1 Data" styleClass="memSpace" /> 
    </apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem>
        <apex:outputLabel value="Status" />
        <apex:outputText value="New" styleClass="memSpace"/>
    </apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem />
    <apex:pageBlockSectionItem />
    <apex:inputField value="{!vou.category__c}" styleClass="memSpace" required="false" />
    <apex:inputField value="{!vou.Range__c}" styleClass="memSpace"/>
    <apex:pageBlockSectionItem />
    <apex:pageBlockSectionItem />
    <apex:inputField value="{!vou.Type__c}" styleClass="memSpaceType">
        <apex:actionSupport event="onchange" action="{!getType}"  />
    </apex:inputField>
</apex:pageBlockSection>
<apex:pageBlockSection id="voucher" title="Voucher" rendered="{!displayVoucher}" columns="2"  >
    <apex:inputField value="{!vou.Voucher_1__c}" styleClass="memSpaceSmall" /> 
    <apex:inputField value="{!vou.Voucher_Amount_1__c}" styleClass="memSpaceSmall" />
    <apex:pageBlockSectionItem />
    <apex:pageBlockSectionItem />
    <apex:inputField value="{!vou.Voucher_2__c}" styleClass="memSpaceSmall" /> 
    <apex:inputField value="{!vou.Voucher_Amount_2__c}" styleClass="memSpaceSmall"/>
    <apex:pageBlockSectionItem />
    <apex:pageBlockSectionItem />
    <apex:inputField value="{!vou.Nb_Voucher_3__c}" styleClass="memSpaceSmall" /> 
    <apex:inputField value="{!vou.Voucher_Amount_3__c}" styleClass="memSpaceSmall" />
</apex:pageBlockSection>

The problem you have is that using an apex:panelGrid breaks the expectations of what apex:pageBlockSection expects for the child elements, and the underlying tables will be calculated in width according to their own rules.

As I stated previously, use empty apex:pageBlockSectionItem if you want to insert an extra, blank row in your design. You can also use the styleClass and dataStyleClass properties to add CSS to increase paddings or margins, if you desire.