How to make 3 horizontal DIVs under each other, in the center of the screen, when the window narrows?

Question

css

Help me please! I've been struggling with this problem for days now.
There are 3 horizontal DIVs with float:left ; and fixed width

these divs are center aligned margin: 0 auto;
When narrowing the window, you need the blocks to rebuild under each other and align in the center like this:

You just get the blocks under each other, but they are nailed to the left edge, but there is an ugly large indent on the right.

Answer 1

@media (max-width: 1000px){
div { float: none; margin: 0 auto;}
}

and why are they suffering?

Answer 2

Try a ready-made framework type solution: getbootstrap.com
In Russian: bootstrap-3.ru