How to prevent css style or its selector * from applying to specific elements

Question

I am making a embed-able widget for the customers so that they can embed my service on their own website. I am having one issue that if customer is using bootstrap v3.3.7 (tested only this version so far) on their website so one of its css style:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

is destroying my app alignment.

My widget app without Bootstrap:

My widget app with Bootstrap:

I have tried a lot of things like I applied internal and inline css styles to override it but nothing worked.

I tried this:

 #widgetParent {
                    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
                    line-height: normal;
                    -webkit-box-sizing: content-box;
                    -moz-box-sizing: content-box;
                    box-sizing: content-box;
                }

Here I applied property value "content-box" because its fixing the issue on Google Chrome Dev Tool but its working in inline or internal css.

I even tried to adjust my app the Bootstrap styles in a way that it will look better but its not possible because obviously not everybody use Bootstrap so my app alignment will crash on without Bootstrap websites.

So, Is there any way I can detect whether the website has Bootstrap or not so I can give styles according to it or any way to prevent this * selector from applying to my widget app ? If anybody have any solution to it please let me know.

I have tested this on bootstrap v3.3.7 CDN which is included in the app like this : 我已经在bootstrap v3.3.7 CDN中测试了此内容，该内容包含在应用程序中，如下所示：

  <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

Thank You

Answer 1

I put this in my internal css I mean the html style tag and the problem resolved.

 #widgetParent div {
                    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; 
                    line-height: normal;
                    -webkit-box-sizing: content-box!important;
                    -moz-box-sizing: content-box!important;
                    box-sizing: content-box!important;

                }

Thanks everyone for help.