Почему margin первого заголовка выходит за секцию

Внешний отступ верхнего дочернего блока может схлопнуться с отступом родителя. Поэтому фон секции начинается ниже ожидаемого, хотя у самой секции нет margin.

.section { display: flow-root; }
.section > :first-child { margin-top: 0; }

flow-root создаёт новый контекст форматирования и препятствует схлопыванию с дочерними отступами. Вторая строка убирает внутренний верхний запас, если он не нужен дизайну. Не добавляйте overflow: hidden только ради этой задачи: можно обрезать тени. Проверьте также нижний отступ последнего абзаца.