Aligning skinned button bar

Hi
i have a button bar, that is centred on the page, when I addd the skinning, the icons/skin is left alined in the button, so I end up with an off centred button bar

How do I centre the skin in the button of the button bar

I can prove the issue is the position of the skin in the button, when I remove the skin the button bar is centred

================================================================

<s:ButtonBar id="activityBar" color="{_uofsModel.stageColour}" dataProvider="{activities}" skinClass="com.peach.uofs.lesson.ActivityButtonBarSkin" />

================================================================

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

alpha.disabled="0.5">

<fx:Metadata>

<![CDATA[

/**

* @copy spark.skins.spark.ApplicationSkin#hostComponent

*/

[HostComponent("spark.components.ButtonBar")]

]]>

</fx:Metadata>

<s:states>

<s:State name="normal" />

<s:State name="disabled" />

</s:states>

<fx:Declarations>

<fx:Component id="firstButton">

<s:ButtonBarButton skinClass="com.peach.uofs.lesson.ActivityButtonBarButton" name="stage1" />

</fx:Component>

<fx:Component id="middleButton" >

<s:ButtonBarButton skinClass="com.peach.uofs.lesson.ActivityButtonBarButton" name="stage1" />

</fx:Component>

<fx:Component id="lastButton" >

<s:ButtonBarButton skinClass="com.peach.uofs.lesson.ActivityButtonBarButton" name="stage1" />

</fx:Component>

</fx:Declarations>

<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->

<s:DataGroup id="dataGroup" width="100%" height="100%" horizontalCenter="0">

<s:layout>

<s:ButtonBarHorizontalLayout gap="-1" />

</s:layout>

</s:DataGroup>

________________________________

Disclaimer: This electronic mail and any attachments are confidential and may be privileged. If you are not the intended recipient, please notify the sender immediately by replying to this email, and destroy all copies of this email and any attachments. Thank you.