Unnecessary white space between two div elements i nboots

Question

I'm coding a website using bootstrap 4 and for some reason that I cant figure out, there is some space between my two wrapper div's in the following code.

<!-- News! Ad with "read more" modal popup -->
<div id="news-bar" class="container-fluid bg-white my-0">
 <h2>News</h2>
    <p>Short Description</p>
    <p>more</p>
</div>

<!-- About us / Register for consultation -->
<div id="about-jumbotron" class="jumbotron jumbotron-fluid bg-dark text-white margin my-0">
    <div class="container-fluid">
        <h1>Big Heading</h1>
        <h2>Smaller heading</h2>
        <p>Description text</p>
    </div>
</div>

Here is an imgur link with a photo of my browser output. Sand brown line is the background-color set for my webpage.

So far I've tried adding my-0 and py-0 to both #about-jumbotron and #news-bar with no success. Also, if i click on the empty space and select inspect element in my web browser it refers to the body tag. As an alternative solution I can set the background color to be the same as one of the div elements but I do want to first try to find a proper solution.

Answer 1

I solved it. The problem was that the the h1 and h2 elements had their own margins pushing the bottom downwards. it was fixed by setting my-0