Родительский блок не становится родительским
Пишу свой первый пет проект, сверстал простенькую верстку. В момент когда начал адаптировать верстку под бэк(поменял div на a href), появился странный баг. После изменения a href не становится родительским блоком, и вся верстка слетает. Примененные стили не меняю
<span class="content-naming">Ближайшие тренировки</span>
<div class="training-handler">
<?php foreach ($trainings as $training): ?>
<div class="mini-detail-training-panel">
<div class="place-detail">
<img src="/icon/Arena1.jpg" width="310px" height="300px">
<a class="training-info-address"><?= $training->getPlace() ?></a>
</div>
<div class="training-information-detail">
<a class="training-info-row"><?= $training->getSport() ?></a>
<a class="training-info-row"><?= $training->getStartTime() ?> - <?= $training->getFinishTime() ?></a>
<a class="training-info-row">Тренер: <?= $training->getTrainer() ?></a>
<a class="training-info-row">Стоимость: <?= $training->getPrice() ?> р.</a>
</div>
</div>
<?php endforeach; ?>
</div>
<span class="content-naming">Ближайшие тренировки</span>
<div class="training-handler">
<?php foreach ($trainings as $training): ?>
<a class="mini-detail-training-panel" href="/training/<?= $training->getTrainingId() ?>/">
<div class="place-detail">
<img src="/icon/Arena1.jpg" width="310px" height="300px">
<a class="training-info-address"><?= $training->getPlace() ?></a>
</div>
<div class="training-information-detail">
<a class="training-info-row"><?= $training->getSport() ?></a>
<a class="training-info-row"><?= $training->getStartTime() ?> - <?= $training->getFinishTime() ?></a>
<a class="training-info-row">Тренер: <?= $training->getTrainer() ?></a>
<a class="training-info-row">Стоимость: <?= $training->getPrice() ?> р.</a>
</div>
</a>
<?php endforeach; ?>
</div>
.content-panel {
display: flex;
flex-direction: column;
margin-left: 79px;
margin-right: 191px;
}
.content-naming {
margin-bottom: 23px;
color: #606060;
font-family: 'Inter', sans-serif;
font-weight: bold;
font-size: 32px;
}
.training-handler {
width: inherit;
height: 800px;
overflow: auto;
}
.training-handler::-webkit-scrollbar {
display: none;
}
.mini-detail-training-panel {
display: flex;
flex-direction: row;
width: 779px;
height: 520px;
background-color: #ffffff;
border-radius: 20px;
margin-bottom: 25px;
}
.mini-detail-training-panel:hover {
background: #e5dfff;
}
.place-detail {
display: flex;
flex-direction: column;
align-items: center;
margin: 60px 25px 0 56px;
}
.training-info-address {
width: 310px;
color: #606060;
font-family: 'Inter', sans-serif;
font-weight: bold;
font-size: 20px;
margin-top: 20px;
text-align: center;
}
.training-information-detail {
display: flex;
flex-direction: column;
margin: 60px 0 0 0;
}
.training-info-row {
width: 375px;
margin-bottom: 24px;
color: #606060;
font-family: 'Inter', sans-serif;
font-weight: bold;
font-size: 24px;
}

