Having trouble centering the card properly, as a beginner I'm not sure what to do.
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 col-12">
<div class="card bg-card col-12">
<div class="card-body text-center">
<img class="rounded-circle mt-3" src="avatar-jessica.jpeg" alt="" style="height: 100px; max-width: auto;">
<div>
<h5 class="text-white mt-2">Jessica Randall</h5>
<p class="text-green">London, United Kingdom</p>
<p class="text-white">"Front-end developer and avid reader."</p>
</div>
<div class="mx-auto col-9 d-grid gap-3">
<a class="btn btn-primary" href="#" role="button">GitHub</a>
<a class="btn btn-primary" href="#" role="button">Frontend Mentor</a>
<a class="btn btn-primary" href="#" role="button">LinkedIn</a>
<a class="btn btn-primary" href="#" role="button">Twitter</a>
<a class="btn btn-primary mb-3" href="#" role="button">Instagram</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Check out how far I've gotten in the screenshot
I've searched multiple sources but couldn't find a solution, aiming to have the card perfectly centered on the screen. Here is my goal for reference