CSS div not floating left, conflicting styles?

[L24]

I'm trying to make a loading bar with two divs, the background bar is grey and the foreground will be green. The bar in the background (.bar) is fine but the green bar (.load) is centered within the grey bar; it should be aligned left. I am somewhat new to this so I might be overlooking something, any help is appreciated!if you need more info about the styling just check out the site http://keithtmock.com/ it's on the homepageHere are the CSS properties\[code\].bar{width:820px;height:30px;margin-top:30px;background-color:gray;}.load{width:820px;height:30px;background-color:green;transform:scale(.5,1);-ms-transform:scale(.5,1); /* IE 9 */-moz-transform:scale(.5,1); /* Firefox */-webkit-transform:scale(.5,1); /* Safari and Chrome */-o-transform:scale(.5,1); /* Opera */}\[/code\]HTML\[code\]<div class="bar"> <div class="load"> </div></div>\[/code\]