Alignment issue pageBlockSection

Question

I want to have this appearance in a visual force page

but the issue is i have used css styles over the pageblocksection but no result, it seems that when we are using more than 4 columns in a pageblocksection the alignments are not correct, so i came across this panelGrid tag and now i have this following appearance

besides being the alignments correct can i have the appearance like in 1st picture here or else any line separations to that view ?
the code is as follows for the panelgrid

 <Apex:pageBlocksection title="Fees" >




           <apex:panelGrid width="250%" columns="5">

           <apex:outputLabel >Manual Billing Required</apex:outputLabel>
           <apex:outputfield value="{!Service_Offering__c.Manual_Billing_Required__c}"/>
           <apex:outputLabel ></apex:outputLabel>
           <apex:outputLabel ></apex:outputLabel>
           <apex:outputLabel ></apex:outputLabel>



              <apex:outputLabel ></apex:outputLabel>
              <apex:outputLabel ></apex:outputLabel>
                <apex:outputLabel >Collected Method</apex:outputLabel>
                <apex:outputLabel >Charge To</apex:outputLabel>
                <apex:outputLabel >Recurring</apex:outputLabel>

                 <apex:outputLabel >Annual Membership Fee Rate</apex:outputLabel>
                 <apex:outputField value="{!Service_Offering__c.Annual_Membership_Fee_Rate__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.Annual_Membership_Fee_Collected_Method__c}" label="" />
               <apex:outputField value="{!Service_Offering__c.Annual_Membership_Fee_Charged_to__c}" label="hello"/>
               <apex:outputField value="{!Service_Offering__c.AMF_Recurring__c}" label=""/>

                <apex:outputLabel >Activation Fee Rate</apex:outputLabel>
               <apex:outputField value="{!Service_Offering__c.Activation_Fee_Rate__c}"/>
               <apex:outputField value="{!Service_Offering__c.Activation_Fee_Collected_Method__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.Activation_Fee_Charged_to__c}" label=""/>
                &nbsp;

               <apex:outputLabel >ELC Fee Rate</apex:outputLabel>
               <apex:outputField value="{!Service_Offering__c.eLC_Fee_Rate__c}"/>
                <apex:outputField value="{!Service_Offering__c.eLC_Fee_Collected_Method__c}" label=""/>
              <apex:outputField value="{!Service_Offering__c.eLC_Fee_Charged_to__c}" label=""/>
                &nbsp;

                 <apex:outputLabel >Invoice Fee Rate</apex:outputLabel>
                 <apex:outputField value="{!Service_Offering__c.Invoice_Fee_Rate__c}"/>
                <apex:outputField value="{!Service_Offering__c.Invoice_Fee_Collected_Method__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.Invoice_Fee_Charged_to__c}" label=""/>
                <apex:outputField value="{!Service_Offering__c.IF_Recurring__c}" label=""/>

                <apex:outputLabel >Invoice Fee w coverage Rate</apex:outputLabel>
                <apex:outputField value="{!Service_Offering__c.Invoice_Fee_w_coverage_Rate__c}"/>
                <apex:outputField value="{!Service_Offering__c.Invoice_Fee_w_coverage_Collected_Method__c}" label=""/>
                <apex:outputField value="{!Service_Offering__c.Invoice_Fee_w_coverage_Charged_to__c}" label=""/>
                 &nbsp;

                <apex:outputLabel >Invoice Presentment Rate</apex:outputLabel>
               <apex:outputField value="{!Service_Offering__c.Invoice_Presentment_Rate__c}"/>
                <apex:outputField value="{!Service_Offering__c.Invoice_Presentment_Collected_Method__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.Invoice_Presentment_Charged_to__c}" label=""/>
                &nbsp;

                <apex:outputLabel >Financial Service Fee Rate</apex:outputLabel>
              <apex:outputField value="{!Service_Offering__c.Financial_Service_Fee_Rate__c}"/>
               <apex:outputField value="{!Service_Offering__c.Financial_Service_Fee_Collected_Method__c}" label=""/>
                <apex:outputField value="{!Service_Offering__c.Financial_Service_Fee_Charged_to__c}" label=""/>
                <apex:outputField value="{!Service_Offering__c.FSF_Recurring__c}" label=""/>

                <apex:outputLabel >Consolidated Money Movement Rate</apex:outputLabel>
                <apex:outputField value="{!Service_Offering__c.Consolidated_Money_Movement_Rate__c}"/>
                <apex:outputField value="{!Service_Offering__c.Consolidated_Money_Movement_Collected_Me__c}" label=""/>
                <apex:outputField value="{!Service_Offering__c.Consolidated_Money_Movement_Charged_to__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.CMM_Recurring__c}" label=""/>

                   <apex:outputLabel >Additional Invoice Fee Rate</apex:outputLabel>
               <apex:outputField value="{!Service_Offering__c.Additional_Invoice_Fee_Rate__c}"/>
               <apex:outputField value="{!Service_Offering__c.Additional_Invoice_Fee_Collected_Method__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.Additional_Invoice_Fee_Charged_to__c}" label=""/>
                <apex:outputField value="{!Service_Offering__c.AIF_Recurring__c}" label=""/>

                <apex:outputLabel >License Fee Rate</apex:outputLabel>
              <apex:outputField value="{!Service_Offering__c.License_Fee_Rate__c}"/>
              <apex:outputField value="{!Service_Offering__c.License_Fee_Collected_Method__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.License_Fee_Charged_to__c}" label=""/>
                &nbsp;

                <apex:outputLabel >Training Fee Rate</apex:outputLabel>
               <apex:outputField value="{!Service_Offering__c.Training_Fee_Rate__c}"/>
                <apex:outputField value="{!Service_Offering__c.Training_Fee_Collected_Method__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.Training_Fee_Charged_to__c}" label=""/>
                 &nbsp;

                <apex:outputLabel >Annual Subscription Fee Rate</apex:outputLabel>
                <apex:outputField value="{!Service_Offering__c.Annual_Subscription_Fee_Rate__c}"/>
                <apex:outputField value="{!Service_Offering__c.Annual_Subscription_Fee_Collected_Method__c}" label=""/>
               <apex:outputField value="{!Service_Offering__c.Annual_Subscription_Fee_Charged_to__c}" label=""/>
                <apex:outputField value="{!Service_Offering__c.FEXASF_Recurring__c}" label=""/>

                <apex:outputLabel >Carton Fee Rate</apex:outputLabel>
                <apex:outputField value="{!Service_Offering__c.Carton_Fee_Rate__c}"/>
                <apex:outputField value="{!Service_Offering__c.Carton_Fee_Collected_Method__c}" label=""/>
                <apex:outputField value="{!Service_Offering__c.Carton_Fee_Charged_to__c}" label=""/>                    
                <apex:outputField value="{!Service_Offering__c.FEXCF_Recurring__c}" label=""/> 

           </apex:panelGrid>




                </Apex:pageBlocksection>

Answer 1

Everything you need to know is here: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_panelGrid.htm.

Specifically, you want to look at 'rules' for the lines and 'columnClasses' for the alignment.

edit: My bad, I should include the relevant sections. columnClasses to align your columns:

A comma-separated list of one or more CSS classes associated with the table's columns. If more than one CSS class is specified, the classes are applied in a repeating fashion to all columns. For example, if you specify columnClasses="classA, classB", then the first column is styled with classA, the second column is styled with classB, the third column is styled with classA, the fourth column is styled with classB, and so on.

And to draw lines, rules:

The borders drawn between cells in the table. Possible values include "none", "groups", "rows", "cols", and "all". If not specified, this value defaults to "none". See also the frames attribute.