Why does placing a CSS class above others completely change other unrelated classes?

[alexrho]

So I have the following at the top of \[code\]bootstrap.css\[/code\]\[code\].scrollable-table { height: 800px; overflow: scroll;}?.top-buffer { margin-top:20px; height:150px;}.cat-title { background-color:gray; margin-top:0px; }\[/code\]\[code\]scrollable-table\[/code\] changes the look of some of my other html while doing what I need it to do. Specifically from what I can tell the height in \[code\].top-buffer\[/code\] is whats being changed. When I move it under those first two it works as expected without causing any issues. So this\[code\].top-buffer { margin-top:20px; height:150px;}.cat-title { background-color:gray; margin-top:0px; }.scrollable-table { height: 800px; overflow: scroll;}?\[/code\]Where I use \[code\]scrollable-table\[/code\] is here\[code\]<div class="span4 scrollable-table" style="background-color:white">\[/code\]\[code\]scrollable-table\[/code\] is also only ever used there!For good measure I'll also show where \[code\]top-buffer\[/code\] is used\[code\]<div class="span3 top-buffer" style="background-color:#DBDBDB">\[/code\]I just don't understand how a completely unrelated class to the other two can change things so drastically. I understand that CSS cascades the styles, but in this case it makes no sense because they are not related. I should mention this is Twitter Bootstrap, and is at the very top over what CSS was already there. I'm hoping someone coud shed some light on why this.