Why does the position:static CSS property indent the first line of my paragraph?

Question

I am trying to display some HTML code on my screen using the JavaScript library jsPsych, but I keep getting a weird indent in my first paragraph (the one below the globe images in the code snippet further down).

If I set the paragraph's position property to position:absolute in my CSS stylesheet, the indent disappears and the paragraph displays as it should. However, I don't want the paragraph to have position:absolute.

Why does the indent appear when the paragraph has position:static? How can I make the indent go away?

const jsPsych = initJsPsych();

const trial = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: function() {
    var html = `<div class="section1">
      <p>TEXT:text</p>
    </div>
    <div class='image_container' style='width:700px; height:350px;'>
    <div class='image' style='width:350px; float:left;'>
      <img  src='https://live.staticflickr.com/83/263570357_e1b9792c7a_b.jpg' style='width:350px;height:350px;'/>
      <div class='text' style='transform:translate(-${0.2 * 350}px, -${0.75 * 350}px);'>text</div>
      <div class='text' style='transform:translate(${0.2 * 350}px, -${0.83 * 350}px);'>text</div>
    </div>
    <div class='image' style='width:350px; float:right;'>
      <img  src='https://live.staticflickr.com/83/263570357_e1b9792c7a_b.jpg' style='width:350px;height:350px;'>
      <div class='text' style='transform:translateY(-${0.83 * 350}px);'>text</div>
    </div>
  </div>`;

    html += `<div class="instructs">
      <p>Blah blah blah, blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah (blah blah blah, blah blah blah blah blah blah).</p>
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
      <p>Blah blah blah, blah blah blah blah blah blah blah blah blah.</p>
   </div>`;

    return html;

  }
}

jsPsych.run([trial]);

.image {
  display: inline-block;
  text-align: center;
  margin: auto;
}

.text {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: white;
}

.section1 {
  width: 800px;
  height: 400px;
  font-size: 40px;
  font-family: Arial;
  text-align: center;
  margin: auto;
}

.image_container {
  margin: auto;
}

.instructs {
  max-width: 1400px;
  text-align: center;
  font-size: 25px;
}

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />

Answer 1

You need to specify that you want the instructs div to be pushed below the formerly created floating image divs.

To achive this you need to add

<div style="clear:both">
</div>

after your section1 div.

Full code for your var html would be:

var html = 
  `<div class="section1">
     <p>TEXT:text</p>
   </div>
   <div class='image_container' style='width:700px; height:350px;'>
     <div class='image' style='width:350px; float:left;'>
       <img  src='https://live.staticflickr.com/83/263570357_e1b9792c7a_b.jpg' style='width:350px;height:350px;'/>
       <div class='text' style='transform:translate(-${0.2 * 350}px, -${0.75 * 350}px);'>text
       </div>
       <div class='text' style='transform:translate(${0.2 * 350}px, -${0.83 * 350}px);'>text
       </div>
     </div>
     <div class='image' style='width:350px; float:right;'>
      <img  src='https://live.staticflickr.com/83/263570357_e1b9792c7a_b.jpg' style='width:350px;height:350px;'>
       <div class='text' style='transform:translateY(-${0.83 * 350}px);'>text
       </div>
     </div>
   </div>
   <div style="clear:both">
   </div>`;

html += 
  `<div class="instructs">
     <p>Blah blah blah, blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah (blah blah blah, blah blah blah blah blah blah).</p>
     <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
     <p>Blah blah blah, blah blah blah blah blah blah blah blah blah.</p>
   </div>`;

You can find a good visualization of the behaviour from the clear property on W3Schools.

To learn more about float elements and the clear property I recommend this answer on StackOverflow:
What does the CSS rule "clear: both" do?