XF 2.2 Tweaking HTML code to look visually nice

[DaveL]

Wondering if anyone would be able to help me tweak the following code so it just looks a bit nicer visually!
So far this is what is displayed:


by using the following code:

<xf:if contentcheck="true">
     <div style="background-color: blue; color: #FFF; padding: 2px; border: 2px solid #ff0000; border-radius: 5px 5px 5px 5px;">
        <center> <xf:contentcheck>{$user.Profile.custom_fields.AllianceName}</xf:contentcheck></center>
    </div>
</xf:if>

Also when viewing on mobile, it seems to stretch all the way across the screen


Would be nice to try and get it to look as professional as the proper banners above.
All advice greatly appreciated