Center multiple floating divs next to each other

Center multiple floating divs next to each other

I'm supposed to make 3 divs sit next to each other. So I made a div and
I've put three divs in, with this css style:
div.holder div {
float: left;
width: 250px;
background-color: yellow;
/*margin-right:auto; /**These did not help**/
margin-left:auto; */
}
And html like this:
<div class="holder">
<div></div>
<div></div>
<div></div>
</div>
And it's supposed to look like this: And instead, it looks like this:
The border divs should be aligned with the ending of the grey line.