Top left space of grid not being used when fetching data from a foreach

Question

Im fetching some data from Firestone consisting of an image and text that I want to display in a grid. Im using a foreach so the website changes the data in firestore for ease.

But when I style this into a grid it leave a space in the top left as if it put content there (but not seen). Im not sure why it misses this space (I have attached a image of what happens)

I would like my grid to start from the left side and not the right as it is now.

 const i = query(collection(db, "teams"));
        const unsubscribe = onSnapshot(i, (querySnapshot) => {
            const teams = document.querySelector('.teams');

            querySnapshot.forEach((doc) => {
                const docData = doc.data();
                const article = teams.appendChild(document.createElement('article'));
                article.innerHTML = `
        <h1 class="team-names"></h1>
        <div class="team-line"></div>
        <img class="team-image">
    `;
                article.children[0].textContent = docData.ageGroup;
                article.children[2].src = docData.teamImage;

                console.log("Current data: ", docData);
            });
        });

.teams {
  display: grid;
  place-items: left;
  max-width: 950px;
  margin: 0 auto 30px;
  padding: 10px;
}

.team-names {
  width: 180px;
  color: #000000;
  border-radius: 8px;
  text-align: left;
}

.team-line {
  background-color: #c00000;
  height: 5px;
  width: 40px;
  padding-top: 5px;
}

.team-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  padding: 20px 0px 30px 0px;
}

<section class="teams">
   <article></article>
</section>

https://i.sstatic.net/uE2N8.png

Answer 1

Try to remove the empty article in your section element :

<section class="teams">
   <article></article>
</section>