Why doesn't offset work and at low resolution blocks overlap each other?

Question

HTML

Greetings. There is a header with a logo and two pictures in a row with an inscription. I'm trying to make adaptive blocks using the bootstrap grid so that they stack nicely with each other. I play around with col-sm-offset-1 indents, but for some reason it doesn’t apply and on a small image the blocks are somehow incomprehensibly grouped together, instead of being located one under one in the center. Fiddle link