My按钮的背景色到目前为止在左右两边都延伸得太远了。我试着修复它，但当我这样做时，按钮最终走得太左或太右了。我用了一个宽度选项来修复它，但没有运气。我能做些什么来修复这个问题呢？

.destination-reccomendations{
    background-image: url(Images/*****************);
    background-position: center;
    background-size: cover;
    position: relative;
    min-height: 50vh;
    width: 100%;
}
.dr-text{
    text-align: center;
    color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 40%;
}
.dr-text h1{
    text-align: center;
    font-size: 50px;
}
.dr-text h3{
    text-align: center;
    font-size: 25px;
    padding-bottom: 20px;
}
.button{
    background-color: green;
    border-radius: 30px;
    padding: 5px;
}
.button-text h1{
    color: black;
    font-size: 30px;
}

<section class="destination-reccomendations">
        <div class="dr-text">
            <h1>Explore the Beauty of our State</h1>
            <h3>Read more about destinations and reccomendations</h3>
            <div class="button">
                <div class="button-text">
                    <h1>Read More</h1>
                </div>
            </div>
        </div>