The containing element can never be smaller than the 400px set width of this element. When the containing element is greater than 400px, the box will be centered horizontally no matter what the width of the outer one.
margin: 0 auto;
Margins do not affect text alignment. We can center the element but not have an effect on text it contains. If we use
text-align on the parent to align boxes it contains, that will also have an effect on the text in the boxes.