I styled a to a button, now its overflowing its parent container

i have trouble fixing my problem: I have a link styled to look like a button. I want it to direct to a sub-page. Now its clipping on the bottom from the parent container. Can someone help? I’m new to html and css :/ Thx 🙂

<div class=”container”>
<a class=”btn” href=”#”>This is a button</a>
</div>

.container{
width:400px;
height: auto;
margin: auto;
}

.btn{
border-radius: 5px;
text-decoration: none;
line-height: 30px;
padding: 12px 24px;
background-color: #ff007a;
}