Убрать пустое пространство внутри кнопки

Обрисую всю картинку. Есть сайт, в main-block есть main-block__body, в нём есть кнопка. Требовалось, чтобы при небольшом размере экрана она расстягивалась на всю ширину main-block__body. Использовал flex: 1 1 auto на нужном размере, не помогло. Стал думать в чем дело. В HTML коде при создании кнопки я использовал тег button вместо div. Использовав последний тег вместо первого проблема была решена, но появилась другая. Теперь кнопка расстягивается не только на нужном размерее, где был flex: 1 1 auto, а вообще, на любом размере. Не пойму как убрать это лишнее пространство. Ах да, еще и высота кнопки почему-то не может быть меньше 60px, хотя думаю это связанно с основной проблемой.

Вот весь код связанный с кнопкой:

<div class="main-block__btn _btn-content">ПРОЦЕДУРЫ ЛЕЧЕНИЯ</div>

._btn-content {
    background-color: #D3B288;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    transition: all 0.2s ease-in-out;
}

.main-block__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
}

@media (max-width: 585px) {
    .main-block__btn {
    flex: 1 1 auto;
    
}

Скрин проблемы: