Родительский блок не становится родительским

Пишу свой первый пет проект, сверстал простенькую верстку. В момент когда начал адаптировать верстку под бэк(поменял 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;
}


Ответы (0 шт):