Q:

Jumbotron overlapping previous elements in bootstrap 4

I was trying to experiment with container, container-fluid, jumbotron classes of bootstrap 4. The HTML code i used is:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h1 class="container">contaigjnohjbofitujkiner</h1>
<h1 class="container-fluid">containfhonjoiyjboifgber</h1>
<span class="jumbotron">jumbotofgbnoitrjbogiftjron</span>
</body>
</html>

In the output of this file I noticed that span element with jumbotron class was slightly overlapping h1 element with container-fluid class. I want to understand why this happened is this a bug in firefox quantum? or is it because any property of jumbotron or container-fluid in bootstrap 4?

A:

As @zgood said in his comment, the span is a display: inline element by default.
Here are some characteristics of it: 

The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or
a    part of a document.

Your question aked why span was overlapping h1 element with container-fluid class. And, how I said before, because of the inline propriety. 
Check out this example, using a <div> and see how it is no more overlapping.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <h1 class="container">Lorem ipsum - Container</h1>
  <h1 class="container-fluid">Lorem ipsum - Container Fluid</h1>
  <div class="jumbotron">Lorem ipsum - Jumbotron</div>
</body>
</html>

