Lo que pasa es que tu contenedor mide 900, y
los tres elementos internos suman 906. Como los dos primeros miden un total de 704, para el tercero que mide 202 no le queda sitio y se va para abajo.
Es por cómo funciona el
modelo de caja en CSS —aka
box model— que añade, en tu caso, el borde al tamaño, haciendo que dichos elementos se agranden. Como tu borde mide un pixel por cada lado, a cada elemento se le suman dos pixeles.
Formas de evitarlo, que cambies el modelo de caja mediante:
O bien lo haces
a la antigua y especificas el ancho restándole el borde. Es decir, para el primer elemento sería un ancho de 498.
También puedes montarte un
pirulilla y simular los bordes usando una sombra:
Yo soy más de usar
box-sizing porque soy vago para ir haciendo sumas
y lo de la sombra me parece algo un poco raro.