The following code causes the outer <a> tag to show twice and splits the contents of the <p> tag:
<a href="https://five-pillars-simulator.luisafk.repl.co" target="fivepillarssmiluator" class="card dfc tc mw m40 cb tdn">
<h2 class="card-title">
Five Pillars Simulator
</h2>
<p class="card-body tj">
A History Project me and <a href="https://replit.com/@gabrielo4">Gabe</a> made for a school History project.
</p>
</a>
It seems the problem is the <a> tag inside the <p> because if I remove it it shows correctly.
Current behaviour:
Expected behaviour (or without the second <a>):
The elements in Chrome DevTools with the messed up behaviour:
>Solution :
The problem is that you cannot have nested <a> tags.
You inner <a> tag links to the same target, so there is no reason to add an extra <a> tag.
If you want to style them differently consider using for instance a <span> for the inner "link"