salesforce - Visualforce の pageblocksection でラベルが整列していない

Question

そのためのコードがこれに似たものである視覚的な力のページがあります。

<apex:page standardController="Order__c" extensions="PadController" tabStyle="Account">
<apex:detail />
    <apex:form > 
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
                <apex:commandButton action="{!cancel}" value="Cancel"/>
                <apex:commandButton action="{!reset}" value="Edit"/>               
            </apex:pageBlockButtons>
            <apex:pageBlockSection columns="2" title="Sample pad" rendered="{!rend}">               
                <apex:inputField value="{!Order__c.Ordered_By__c}"/>  
                    <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>                   
                <apex:inputField value="{!Order__c.Areas__c}"/>                
                    <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
                <apex:selectList value="{!samplepro}" size="1">
                    <apex:actionSupport event="onchange" reRender="out"/>
                        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                        <b style="font: bold 11.25px Arial;color:#504A4B ;">Sample Pro</b>&nbsp;&nbsp;&nbsp;&nbsp;
                        <apex:selectOptions value="{!samplepros}">                     
                        </apex:selectOptions>    
                </apex:selectList>                 
            </apex:pageBlockSection>

            <apex:pageblocksection rendered="{!rendsave}">            
                    <apex:outputField value="{!Order__c.Ordered_By__c}"/>
                        <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>                  
                    <apex:outputField value="{!Order__c.Areas__c}"/>
                        <apex:outputPanel id="out">
                        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                   
                        <b style="font: bold 11.25px Arial;color:#504A4B ;">Sample Pro</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <apex:outputText value="{!samplepro}">
                    </apex:outputText>
                </apex:outputPanel>                                   
            </apex:pageBlockSection>

        </apex:pageBlock>
    </apex:form>    
</apex:page>

samplepro ラベルが残りのフィールドと正しく一致しません。フォントも適切に一致していません。両方のページで同じケース。私はこれが初めてです。すべてのフィールドをフォント ファミリーに合わせて整列する方法を教えてください。残りのフィールドと一致させるためだけに css スタイルを指定しましたが、それでも適切ではありません。私を助けてください 。