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>