Embeds loading on top of one another in HTML

Question

This is a simple HTML query. I'm trying to create a simple HTML dashboard because my Jupyter notebook, which combines HTML charts from other notebooks, is falling foul of Sharepoint nonsense that I can't solve.

I've written a simple HTML page to try to present the notebook but the HTML files that I'm embedding load on top of one another.

I want the embeds to drop into the text rather than loading on top of one another. How do I do that?

.responsive-embed {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 75%;
  /* Adjust this value to change the aspect ratio */
}

.responsive-embed embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<meta name="viewport" content="style=" flex: 1 0 auto; " width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</style>
<div style="display: flex; flex-wrap: wrap;" class="container">
  <h1>Some data</h1>



  <h2>Mouths fed</h2>
  <div style="display: flex; flex-wrap: wrap;" class="responsive-embed">


    <h2>Mouths fed</h2>
    <p>This is a standard metric for tracking the number of people - both children and adults - that receive support from our food parcels.</p>
    <p>Here is the breakdown over time - since 2017.</p>

    <div style="display: flex; flex-wrap: wrap;">
      <embed src=".\ASSETS\mouths_fed_chart.html" style="flex: 1 0 auto;" width=1072 height=580></embed>
    </div>


    <div style="display: flex; flex-wrap: wrap;">
      <embed src="mouths_fed_chart.html" style="flex: 1 0 auto;" width=1072 height=580)></embed>
    </div>


  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>