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 样式只是为了将它与其他字段匹配，但即便如此它也不合适。请帮帮我。