Почему блоки не выравниваются горизонтально?

Есть 3 блока. Они в другом одном блоке. Но они не выравниваются горизонтально ровно. В чем может быть проблема?

<div>
    <div class="l"></div>
    <div class="c"></div>
    <div class="r"></div>
</div>

.l {margin: 0 auto; float: left; width:33%; height:50px; background: red;}
.c {margin: 0 auto; width:33%; height:50px; background: green;}
.r {margin: 0 auto; float: right; width:33%; height:50px; background: yellow;}