Changing <div> to <a> messing up my styles - html

Question

I was stay far from coding for a very long time but today I start to do some code, and have fun with html and styling, lol. My goal was to create a simple card gallery which is very simple and every 6 year old child can do in a few lines of some css and html. As you can see I failed and ended up here in stackoverflow looking for some help.
The problem accured when I tried to change my div card into an a link, back in the days it worked well as I can remember. Since there was an premade class with styles, you simply changed the tag and everything was well, except you should change colors on that a may be. But today when I did it, my card... it just messed up... I got really confused. I also tried some different approaches, for example wrap the div into a and it looks wierd too. So the main questions are:
Why everyting is messed up, when simply change tag to a from div (we have premade css class!)? But the card is like became divided into 2 parts...
When I tried to wrapped div card with a. In my DOM I can see that this a is like duplicate itself inside DOM on every element inside itself.
Can anyone explain what is going on here and what is a good approach nowadays?
https://jsfiddle.net/49Lj8dxz/2/
.my-cards-container {
display: flex;
justify-content: center;
align-items: center;
}
.my-card {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
text-align:center;
max-width: 228px;
margin-left: 10px;
background: grey;
}
.my-img-container {
width: 100%;
display: block;
}
.my-img-container img {
display: block;
max-width: 100%;
overflow: hidden;
vertical-align: top;
}
<div class="my-cards-container">
<div class="my-card">
<div class="my-img-container">
<img src="https://via.placeholder.com/300" alt="fishy-img">
</div>
<div class="my-content-container">
<h2>Fishy title 1</h2>
<div>Fishy text 1</div>
<div class="my-links-container">
link 1
link 2
</div>
</div>
</div>
<a class="my-card">
<div class="my-img-container">
<img src="https://via.placeholder.com/300" alt="fishy-img">
</div>
<div class="my-content-container">
<h2>Fishy title 2</h2>
<div>Fishy text 2</div>
<div class="my-links-container">
link 1
link 2
</div>
</div>
</a>
<a href="#">
<div class="my-card">
<div class="my-img-container">
<img src="https://via.placeholder.com/300" alt="fishy-img">
</div>
<div class="my-content-container">
<h2>Fishy title 3</h2>
<div>Fishy text 3</div>
<div class="my-links-container">
link 1
link 2
</div>
</div>
</div>
</a>
</div>