Это по какой-то системе делается или дизайнер просто так по красоте на глазок подбирает отступы?
Эта система в народе называется стайлгайд. В долгоживущих проектах иметь его в оформленном виде очень полезно. В нем есть и все размеры, и все цвета, и шрифты, а часто и компоненты по отдельности. Если у вас есть стайлгайд - то вы работаете по нему, макет страницы - это скорее для понимания "что в какое место поставить". Он может быть кривым/косым, хоть на бумажке нарисованным.
Надо ли именно такие отступы соблюдать или можно, например, просто в бутстраповский контейнер запихнуть секцию и не париться?
А вот если у вас нет стайлгайда и при этом кривой макет, то стоит спросить дизайнера/заказчика об этом и действовать исходя из их объяснений. Единственное, что стоит серьезно обсуждать - так это ситуацию, когда заказчик хочет pixel-perfect, до дизайнера уже не достучаться, а весь макет кривой настолько, что аж в глазах рябит. Там нужно или увеличивать сроки и цену или убеждать, что плюс-минус пара пикселей не имеют великого смысла и вы выиграете и по срокам и в перспективе при поддержке всего этого.
