wordpress jetpack unwanted border in bootstrap email input

Question

I'm using the subscription form from Jetpack in Wordpress. I've Boostrappified the jetpack form as best I can with custom js, but can't seem to get rid of a pesky border - inside - the border provided by Bootstrap. The same thing appears on Chrome, Firefox and Safari (MacOSX) as well as iOS. How to get rid of this darn inner border?

Page illustrating the problem!

<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>

Answer 1

It can be resolved using below style

#subscribe-email input
{
    border: none !important;
}