How to fix padding on nested column in Bootstrap?

Question

css

When narrowing the screen to xs sizes, all the columns become in a row, but those that are nested have a jamb in the form of side padding. I understand that you can overwrite this with your css, but is there probably something provided by Bootstrap himself in such cases? Sorry in advance if I read the instructions inattentively, but did not find the answer there.
codepen.io/dhatt/pen/mAWAOb?editors=1000

Answer 1

How to layout with bootstrap?

The main thing to remember is that .row should not be a direct child of .row, there must be .col-*-* between them. The same goes for columns.