How can I remove box-sizing: border-box from Bootstrap CSS?

ACTUAL QUESTION

I am building a SharePoint 2013 site and I'm including Bootstrap minified css v3.3.4 files within the site to be able to use their tabs for organizational purposes.

This thing is the inclusion of the Bootstrap CSS makes it so that the "Help" symbol and the "Focus on Content" button get slightly messed up. The problem is one line of code within this bootstrap CSS file. It is "box-sizing:border-box;" and when it is turned off (while using the Inspect Element tool) everything looks just fine again. What I'm asking is how can I remove/turn off this line of code within the CSS file so I can include this CSS file with no issues?

Note: I'm asking this here because it has to do with CSS and Bootstrap - asking it on the SharePoint stack exchange doesn't really fit the question.

ANSWER

I had the same problem with my SharePoint 2013 sites as well when using bootstrap in my branding. You will need to override the effects by adding another css file AFTER the corev15.css and the bootstrap.css references, with the following:

#suiteBar *, #s4-ribbonrow * 
{
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing:content-box;
}

This will target box-sizing:content-box to just the suiteBar and ribbon rows sections of the SharePoint page. Hope this helps.