Circular Gauge Center Template value will not center within

[Fred]

I have a Circular Gauge within a bootstrap card. I cannot seem to get the "CenterTemplate" value centered in the gauge. Is there a setting I'm missing or does someone have a custom CSS to help.  below is the html markup along with an attached image of the gauge.  

Thank you in advance for any help!

<div class="card shadow mb-4" id="gaugecontainer1">
     <div class="card-header py-3">
	   <h6 class="m-0 font-weight-bold text-primary">Daily Productivity Rate</h6>
       </div>
	<div class="card-body">
            <div class="container-fluid align-content-center">								
	        <telerik:RadCircularGauge ID="Gauge1" runat="server" Width="90%" Height="350px" Font-Size="X-Large"   Skin="Silk" CssClass="gauge-left-padd">
		<ClientEvents OnLoad="Gauge1_OnLoad" />
		<CenterTemplate>
			#:value # %
		</CenterTemplate>
		<Scale Min="0" Max="200">
		         <Labels Visible="true" Position="Inside" Font="12px Arial,Helvetica,sans-serif" Format="{0}%" />
			<MajorTicks Visible="true" Size="20" Color="Black" />
			<MinorTicks Visible="true" Color="Black" />
		 </Scale>
		<ColorsCollection>
			<telerik:ArcGaugeColor From="0" To="79" Color="Red" />
			<telerik:ArcGaugeColor From="80" To="90" Color="Orange" />
			<telerik:ArcGaugeColor From="91" To="100" Color="Yellow" />
			<telerik:ArcGaugeColor From="101" To="120" Color="LightGreen" />
			<telerik:ArcGaugeColor From="121" To="200" Color="Blue" />
		</ColorsCollection>
	</telerik:RadCircularGauge>								
     </div>
 </div>
</div>
.gauge-left-padd {
    padding-left: 2em;
}		

<script type="text/javascript">
    var gauge1, TO = false;
    function Gauge1_OnLoad(sender, args) {
	gauge1 = sender.get_kendoWidget();
     }
     window.onresize = (function () {
	if (TO !== false)
		clearTimeout(TO);
	TO = setTimeout(resizeGauge, 200);
        });
        function resizeGauge() {
	       if (gauge1) {
		   gauge1.resize();
	        }
          }
</script>

[Fred]

Update: I kind of found a workaround but not a final solution. I was able warp the "Value" in the <CenterTemplate> into a div and add a padding-left styling (see snippet below).  According to the online demos and documentation, this shouldn't be required. Also, the value maybe slightly off center for smaller screen sizes. 

<CenterTemplate>
     <div style="padding-left: 8em">
             #: Value #%
   <div>
</CenterTemplate>

[Vasko]

Hello Fred,

I have tested your code snippet and the issue appears to happen due to gauge-left-padd CSS class and its padding. When removing it, the value is centered correcrtly.

No CSS class:

With CSS class:

 Is this padding supposed to be applied to the Gauge, and if not, you can remove the class.

Regards,
Vasko
Progress Telerik

[Fred]

Thank you for your response Vasko,

I added the padding-left styling because the gauge would not center within the in the bootstrap card-body container.  Without it, the entire gauge would shift the to the left.  FYI: The card container is actually contained within a bootstrap row/column div that displays to right of the page.