Why can't i have more than one tesla card

Question

i duplicated the container div but i only still have one tesla card instead of two, please can someone help me fix it :

here is the developer : https://codepen.io/shahidshaikhs/

https://code.sololearn.com/WF9sRIa25Zbx/?ref=app

Answer 1

alternatively, you could remove id(s) and previous rules, and only set these css rules:

.container:nth-of-type(2) {
top:calc(50% + 700px);
}
.container:nth-of-type(3) {
top:calc(50% + 1400px);
}

... and so on up to n (the card count)

Answer 2

because your div (with class 'container") is absolute positionned, so the second one is at the same lace than the first...

Answer 3

to view both set 'id="cont'" to one of them and add to css:

#cont {
top:calc(50% + 700px);
}

Answer 4

for each add one unique id, and its own css rule to define its top position (adding n*700px for each rank from 1 to n-1, only one with no id nor rule)

Answer 5

visph that doesn't work now that it is three, can you give me a solution that allows duplicating the code as many times as possible