I've been testing out the flipcards included in Canvas, the HTML templates resource, and now I want to implement them in an actual, pre-existing website.

On my test page, the cards were in the middle of the screen, their height could be changed with a data-height-xl attribute in the HTML, that also appears in the JavaScript that runs the page, and even reorganized themselves if one of the cards was too long. Example here (I removed the pictures and the text, but the cards are working)

However, in the website I want to add this in, the cards are stretched to the sides of the page, and all have the same height (because of that, I don't even know if they still reorganize themselves). I tried comparing and making changes to the JS/CSS code that was already on the website (which also uses Canvas templates) with what I used for my tests, but I haven't been able to get much further. I feel the stretching comes from containers in the page (but I may be wrong), but I have no clue as to what prevents the height changes to take effect.

Sorry if it's not really understandable. This is my first question here and I'm still a beginner in HTML/CSS.