Как сделать, чтобы блок кнопки не растягивался на всю высоту?

Не могу понять, почему кнопка не позиционируется как надо, сразу после описания на указанный margin? Уходит сильно вниз и откуда могут быть такие расходки...подскажите, знающие люди, пожалуйста.

<section class="hero-block">
   <h1 class="visually-hidden">Описание возможностей Roomgram</h1>
    <div class="hero-block__wrapper">
       <h2 class="hero-block__title">2D, 3D, 360º конструктор</h2>
       <p class="hero-block__description">Создавайте интерьеры, экстерьеры и ландшафты!</p>
       <a href="#" class="button hero-block__button">попробовать бесплатно</a>
       <p>Давайте познакомимся!</p>
     </div>   
</section>

css

.hero-block {
    width: 50%;
}

.hero-block__wrapper {
    width: 420px;
    margin: 0 auto;
}

.hero-block__title {
    margin: 0;
    padding: 90px 0 38px;
    color: var(--color-accent);
    font-size: 42px;
    line-height: 63px;
    text-align: center;
}

.hero-block__description {
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    margin: 0 0 59px 0;
    text-align: center;
}