Why does layout crash when m-*?

Question

css

When laying out, all 3 divs must be in one line. With m-0 class, they work like that, but I need padding. The solution with paddings does not seem beautiful and correct to me ... Using w-100 is also crooked. If the expansion leaves 2 columns, they will stretch. Couldn't google.
https://jsfiddle.net/pf69d7oe/17/

Answer 1

Are you sure you went through the basics of bootstrap?
Maybe I don't know something, but it shouldn't be like that.

<div class="archive container col-xl-9">
          <h2 class="text-center">Типа Архив</h2>
           <div class="row">

To add margin \ padding to such elements, you need to wrap the elements in a div with the item class