First, what is div.body? This says a div with a class "body" which there is none.
I think what you meant was to apply this to the body, which will likely make your problem go away. It's likely because although the width is 50%, the padding and margins on the body itself make the body area too narrow for a true "50%."
I would remove the specific selectors, from
So those selectors can be used on other elements as you need them.
I'm also confused as to why "center" is floated left.
To float elements around other elements, put your floats first:
<div class="left">this will float left</div>
<div class="right">this will float right</div>
<div class="center">If there is room between the two, which there won't be at 50%, this would normally display between the two.</div>
When in doubt, put borders on the divs temporarily, but note that this will mess up the "50%" since it's now wider than 50%.. Temporarily reduce the width to 49%;.
Last, only use a class if you foresee these items being reused on the same page - looks to me like ID's will work just fine. An ID is appropriate if the element is unique to each page (i.e., only one named ID per page.)
I'm not sure what you are after here, but to truly center the .center class you'll probably need a wrapper, hence "center-container."