Html – Jekyll for loop only wraps two first elements

I am new to using jekyll and I faced a weird problem for a while that I can’t figure out.
so I have a moviesingle.html like this.

<div class="grid__item2">
  <div class="card">
    <div class="card_left">
      <img src="{{ movie.poster }}" alt="{{ movie.title }}" />
    </div>
    <div class="card_right">
      <h1>{{ movie.title }}</h1>
      <div class="card_right__details">
        <ul>
          <li>{{ movie.year }}</li>
          <li>{{ movie.director }}</li>
          <li>{{movie.rating}} / 10</li>
        </ul>
        <div class="card_right__review">
          <p>{{ movie.description }}</p>
          <a href="{{movie.link}}" target='_blank'>Read more</a>
        </div>

      </div>
      </div>
    </div>
  </div>
</div>
</div>

and I also have a movielist.html like this

{% for movie in site.movies %} {% include moviesingle.html %} {% endfor %}

and I have a movies.html like this

---
layout: default
title: "Movies"
permalink: /movies/
author_profile: true
---

<div id="wrapper">{% include movielist.html %}</div>

Here’s my problem I expect that all my moviesingle.html created be inside the div with id="wrapper" but only the first two elements are included and the rest are outside the . this is the end result:

      <div id="wrapper"> 
<div class="grid__item2">
  <div class="card">
    <div class="card_left">
      <img src="..." alt="...">
    </div>
    <div class="card_right">
      <h1>...</h1>
      <div class="card_right__details">
        <ul>
          <li>...</li>
          <li>...</li>
          <li>... / 10</li>
        </ul>
        <div class="card_right__review">
          <p></p>
          <a href="..." target="_blank">Read more</a>
        </div>

      </div>
      </div>
    </div>
  </div>
</div>
  
<div class="grid__item2">
  <div class="card">
    <div class="card_left">
      <img src="..." alt="...">
    </div>
    <div class="card_right">
      <h1>Arcane Season 1</h1>
      <div class="card_right__details">
        <ul>
          <li>...</li>
          <li>...</li>
          <li>... / 10</li>
        </ul>
        <div class="card_right__review">
          <p></p>
          <a href=...">Read more</a>
        </div>

      </div>
      </div>
    </div>
  </div>

If I don’t loop through contents (like putting empty s) this does not happen. if I put any other elements in the wrapper still only first two iterations of the loop are contained there. I would really appreciate if anyone knows what’s going on