Random misplacement of a div

I’m making a website for myself and it has a projects page and I made a js script to auto add each of the projects using a json file. I have 4 projects in the json file so far but one of them is acting up. Image here

Circled in red is the div that is messed up.
Here is the css for those divs:

#img {
vertical-align: top;
display: inline-block;
border-radius: 10px 10px 0px 0px;
width: 340px;
}
#title {
    margin-top: 40px;
    vertical-align: top;
    font-weight: bold;
    font-size: 30px;
    float: left;
    margin-left: 5px;
    display: inline-block;
}
#desc {
    float: left;
    margin-left: 5px;
    display: inline-block;
}

Now here is the js script that is adding them:

$.getJSON('https://raw.githubusercontent.com/Pinball3D/andysthings/main/registy.json', 
function(data){
  console.log(data);
  var i = 0;
  console.log(data.length, i < data.length)
  while (i < data.length) {
    dat = data[i];
    var a = document.createElement("a");
    a.href=dat.url;
    var li = document.createElement("li");
    li.id="item";
    var img = document.createElement("img");
    img.src=dat.img;
    img.id="img";
    li.appendChild(img);
    var title = document.createElement("div");
    title.id="title";
    title.textContent=dat.name;
    li.appendChild(title);
    var desc = document.createElement("div");
    desc.id="desc";
    desc.textContent=dat.desc;
    li.appendChild(desc);
    a.appendChild(li);
    document.querySelector("#grid").appendChild(a);
    i++;
  }
});

I don’t know what is causing that element to be out of place.