Bootstrap CSS in header is causing alot of issues

[TheLastSuperman]

Don't add in css that way, I mean you can but for example you should be adding in the css to css_additional.css template in the style via style manager then adding in your new <div> classes to whichever templates you wish.

It sounds like something in your local css files you've included is overwriting the default css, you should view a normal default style and compare that css to the css you've added, if any have identical names they could be interfering with each other. I've had to work with third-party included css in the past for the NFL but in the end would usually add my own overwrites as best possible to the additional css template but by controlling the css and including it in the correct template you won't have any problem adjusting values only if the definition name you added is the same as one that already exist (by default). Also bear in mind if you try to overwrite any default definitions and aren't quite sure which css template it's in you can add the same definition name to css_additional.css and in the code just use !important to overwrite the default value, example:

body {
    background:#ffffff url(images/mycustombackground.png) no-repeat center fixed !important;
}

#breadcrumbs, #content {
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

#header img, .site-logo {
    opacity: 100 !important;
    filter: alpha(opacity=100) !important; /* For IE8 and earlier */
}

.mycustomcsshere {
    background-color:#f5f5f5;
    border: 1px solid #dbdbdb;
    color:#333333;
    font-size:1em;
    font-family: 'Handlee', cursive;
}

I tend to use !important quite a bit as you can tell .