Currently, I am in the process of creating a blackjack game and encountering an issue with overlapping cards. Despite implementing the code below, all I see is a column of cards displayed.
I have looked at similar questions for guidance, but I'm unable to pinpoint what mistake I might be making.
Any assistance would be greatly appreciated! Thank you in advance!
html,
body {
margin: 0px;
background-color: rgb(0, 46, 0);
color: white;
}
.title {
text-align: center;
background-color: black;
color: white;
padding: 20px;
font-size: 25px;
}
.card {
position: relative;
width: 150px;
left: 100px;
margin-left: -75px;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce2fce2ffb0b7a6b3e1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Blackjack</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header class="title">
Blackjack
</header>
<div class="row mt-2">
<div class="col text-center">
<button class="btn btn-danger">New Game</button>
<button class="btn btn-primary">Hit</button>
<button class="btn btn-primary">Stand</button>
</div>
</div>
<div class="row container">
<div class="col">
<h1>Player <small>0</small> Points</h1>
<div id="player-cards">
<img class="card" src="assets/cartas/10C.png">
<img class="card" src="assets/cartas/10C.png">
<img class="card" src="assets/cartas/10C.png">
<img class="card" src="assets/cartas/10C.png">
</div>
</div>
</div>Considering my limited experience, it's entirely possible that my mistake is trivial. Nevertheless, any guidance or solution would be immensely helpful as I'm struggling to identify the error on my own.