I have implemented the Jetpack subscription form in WordPress and customized it using Bootstrap. However, I am struggling to remove an inner border that is causing issues within the Bootstrap framework. This border persists across different browsers and platforms including Chrome, Firefox, Safari on MacOSX, and iOS. Any suggestions on how to resolve this inner border problem? https://i.sstatic.net/ftEqU.png
Here is a page illustrating the issue!
<div id="blog_subscription-2" class="widget widget_blog_subscription jetpack_subscription_widget">
<h3 class="sidebar_title"></h3>
<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2" class="input-group mb-3">
<div id="subscribe-email" class="form-control">
<label id="jetpack-subscribe-label" class="screen-reader-text" for="subscribe-field-blog_subscription-2">Email Address</label>
<input type="email" name="email" required="required" class="required" value="" id="subscribe-field-blog_subscription-2" placeholder="Email Address">
</div>
<div id="subscribe-submit" class="input-group-append">
<input type="hidden" name="action" value="subscribe">
<input type="hidden" name="source" value="https://gurueap.com/reconstructing-trends/">
<input type="hidden" name="sub-type" value="widget">
<input type="hidden" name="redirect_fragment" value="blog_subscription-2">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="3f90b6cdaf">
<button type="submit" name="jetpack_subscriptions_widget" class="btn btn-primary">Subscribe</button>
</div>
</form>
</div>