I think the best solution here, if you're OK with targeting only "modern" browsers (and by that I generally mean anything other than IE) is to use flex:
.red { background: red; color: white;}
.black { background: black; color: white;}
.number { height: 45px; width: 34px }
.d-flex {display:flex !important; flex-direction: row; justify-content:flex-start;}
.d-flex figure { margin:0; padding:0;}
<section class="d-flex">
<figure class="number red" id='1'><div class="float">1</div></figure>
<figure class="number black" id='2'><div class="float">2</div></figure>
<figure class="number red" id='3'><div class="float">3</div></figure>
</section>
failing that, make sure you set
margin:0; padding:0;
on your figure elements. They come with standard margins in most browsers, and that's probably what's been the problem.