Promo box inside & outside color section

i guess your site with promo box on the second case is built inside a text-block ? or similar to it.
The wpautop filter adds some empty p-tags ( <p></p> ) here :
and because of rule that influences headings as sibling of p-tag :

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
    margin-top: 1.5em;
}

there will be that outlook.
you can redefine the rule for promo-box – or deactivate wpautop filter in WordPress. (

Or remove with one child-theme functions.php snippet all empty p-tags at all:

function remove_empty_p_tags(){
?>
<script type="text/javascript">
(function($) {
    $('p:empty').remove();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_empty_p_tags');

the margin on bottom of the whole promo-box is the same in both cases – but top margin is set here to another value – look into developer tools to see difference