estou tentando deixar uma pagina HTML com algumas divs alinhadas lado a lado e centralizadas na página. Tenho o seguinte html:

    <div id="container">
    	<div id="box-texto-1" class="box-texto">Lorem ipsum velit leo risus ultrices pellentesque vehicula etiam ante
    		malesuada nec</div>
    	<div id="box-1" class="box">1</div>
    	<div id="box-2" class="box">2</div>
    	<div id="box-3" class="box">3</div>
    	<div id="box-texto-2" class="box-texto">Lorem ipsum velit leo risus ultrices pellentesque vehicula etiam ante
    		malesuada nec</div>
    </div>
As divs com `class="box"` devem ficar lado a lodo e centralizadas, já as divs com `classe="box-texto"` não devem ficar centralizadas. A ideia é fazer funcionar apenas com CSS sem criar novas tags.

Tentei usar `foat: left`, ele alinhou lado a lado, mas não consegui centralizar. Tive outras tentativar com `display` mas também sem sucesso.

No link abaixo tem um exemplo onde estava trabalhando:

https://stackblitz.com/edit/js-m2ngja?file=style.css

Conto com a ajuda de todos!