https://i.sstatic.net/kJcRX.pngThe background color of my button is extending too far out on both the right and left sides. I attempted to correct it by adjusting the width, but then the button ended up being off-center. I'm having trouble fixing this issue. What steps should I take to resolve the problem.
.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>