Why does bootstrap have a negative margin on row ?

Question

css

I make an adaptive grid for myself, while simultaneously studying the structure of other mass frameworks.
Please tell me why in bootstrap .container has {padding-left and right: 15px;} , while .row has { padding-left and right: -15px;} ?
And yet, if I want to make an inner margin in the container on the right and left, is it better to set it as a percentage or can it be px ? And who better to set .container or .row ?

Answer 1

Negative indent for row so that in a multi-level structure, indents for blocks of different levels are not summed up.

<div class="row">
    <div class="col-sm-12" id="outer">
        <div class="row">
            <div class="col-sm-12" id="inner">
            </div>
        </div>
    </div>
</div>

In the above example, the #inner block will be the same size as the #outer block. If row didn't have negative padding, then the #inner block would be smaller than the #outer block by 15px on each side.

Answer 2

For example, to sort product cards in a category