Header Row columns don't line up when CSS * font-size and vertical scrollbars are used

swells

I reposted this in priority support before I realized I could just change it here.
Sorry. This is a duplicate and answered by Allan Here

---

First, I am really impressed with v1.10. It is much more intuitive to use. So, thanks!

It seems that when I create a table with vertical scroll bars, the header row columns don't line up.
I traced the issue to our CSS code, that has:

* {
    font-size: 16px;
}

If I remove the font-size line, the headers line up, but it messes up the text of the rest of our site.
If I remove the vertical scroll bars, the headers also line up, but we want to use them.

Here is the link to the JS Bin output: http://live.datatables.net/lavoqaji/1/
And the link to the source: http://live.datatables.net/lavoqaji/1/edit?html,css,js,output

Any help would be appreciated.

Thanks!