How do I debug this javascript centering issue?

Question

Hoping someone with more experienced eyes than myself can help me identify where I've gone wrong here.

I'm struggling to get the four child elements of the parent div 'winImg' to center horizontally in javascript (children are all images called 'leader', 'follower1', 'follower2' and 'follower3').

``function winGame() {
 update(locations[6]);

 const winImg = document.getElementById('win-img');

 leader.src = "https://preview.redd.it/what-is-rataus-history-with-his-cult-and-ratoo-v0-au38e19g4zjc1.gif?width=360&auto=webp&s=c8bbc859a9ce2851b0d5f699c0eb9a8f4f011b00";

 follower1.src = "https://preview.redd.it/patch-notes-1-1-5-v0-f8awrb2dfcsa1.gif?width=194&auto=webp&s=34ea76918584d5b33804319d1ec59a0bf9b48914";

 follower2.src = "https://preview.redd.it/patch-notes-1-1-5-v0-f8awrb2dfcsa1.gif?width=194&auto=webp&s=34ea76918584d5b33804319d1ec59a0bf9b48914";

 follower3.src = "https://preview.redd.it/patch-notes-1-1-5-v0-f8awrb2dfcsa1.gif?    width=194&auto=webp&s=34ea76918584d5b33804319d1ec59a0bf9b48914";

 winImg.style.display = "flex";
 winImg.style.flexDirection = "row";
 winImg.style.justifyContent = "center";
 winImg.style.padding = "1rem";
 winImg.style.maxWidth = "550px";

 leader.style.display = "block";
 leader.style.margin = "0 auto"; 
 leader.style.width = "6rem"; 
 leader.style.height = "6rem"; 

 follower1.style.display = "block";
 follower1.style.margin = "0 auto"; 
 follower1.style.width = "3rem"; 
 follower1.style.height = "5rem";

 follower2.style.display = "block";
 follower2.style.margin = "0 auto";
 follower2.style.width = "3rem"; 
 follower2.style.height = "5rem"; 

 follower3.style.display = "block";
 follower3.style.margin = "0 auto"; 
 follower3.style.width = "3rem"; 
 follower3.style.height = "5rem"; 

 }`

` As you can see, I tried block display and margin '0 auto' for the children images then flex display with rows for the parent div so the images will all be on the same line. I expected them to be centred but they are left aligned.