Why does insertBefore work weirdly with the span element?

I am trying to add a span element before a referenced span element. However, there seems to be no space between the new element and the referenced span element.

enter image description here

// Create a new, plain <span> element
let sp1 = document.createElement("span");

// Set class attribute and value
sp1.setAttribute("class", "new-element");

// Write content to element
sp1.innerText = "foo bar";
// Get the reference element
let sp2 = document.querySelector(".third-element");

// Get the parent element
let parentDiv = sp2.parentNode;

// Insert the new element into before sp2
parentDiv.insertBefore(sp1, sp2);
<div id="main-container">
    <span>foo bar</span>
    <span>foo bar</span>
    <span class="third-element">foo bar</span>
    <span>foo bar</span>
</div>