Why does Bootstrap breaks some css code?

When I add bootsrtap the thing which is made using native css doesn’t show on the right place for some unknown reason to me.
Here is what happens with bootstrap and without. The second shall happen on the first too.
Just a note this thing shall be a population pyramid, sorted by womans(red) and males(blue) by age.

Edit: jsfiddle.net/64mjs03f/

I think the problem might be due to Normalization.

Libraries like bootstrap now come with a Normalized CSS. What that does is, reset the styles of the HTML elements that might render differently across browsers.

All browsers have their own CSS for rendering elements. Normalization helps developers create a web app, that looks same across all browsers.