I am currently working on a webpage design using bootstrap. The layout consists of different sections, each containing a bootstrap row within a container.
However, I encountered an issue where new rows are not appearing below the previous row as expected, but rather behind it.
My understanding is that the rows should be stacked below one another. Can anyone help me figure out what might be causing this problem?
Here is an image showcasing the issue: https://i.sstatic.net/M1GpL.png
document.addEventListener("DOMContentLoaded", function(event) {
const image = new Image();
image.src = document.getElementById("img-rocket").getAttribute("src");
// JavaScript code continues...
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
/* CSS code continues... */
<head>
<!-- External links and scripts -->
<!-- HTML body content -->
</body>
Fiddle representing the problem: https://jsfiddle.net/aeo910rb/
The second row (which appears behind the first row) has a bg-dark class in the fiddle for better visibility of the issue.