Link exceeding width of container - html

Question

I am running into an issue that has stumped me. I searched all over for an answer, but could not find one.
I have a container that I am making directly out of an <a> tag. Originally, my issue was that the clickable linked area exceeded outside of the border. I then removed display: block from .bigButtonLink. This resolved this issue, but then two other issues appeared. 1. The link container is not centered anymore. 2. The margin under the link is not rendering.
Does anyone see what I am doing wrong?
.sec {
margin: 60px auto;
}
.bigButtonLink {
text-decoration: none;
/*display: block;*/
text-align: center;
margin: 50px auto;
}
.bigButton {
border: 1px solid #BE1E2D;
-webkit-appearance: none;
border-radius: 2px;
box-sizing: border-box;
background: #FFF;
font-family: 'Muli', sans-serif;
color: #B82222;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: 2px solid #B82222;
font-size: 2.3rem;
padding: 3rem 6rem 3rem 4.5rem;
}
#red {
background: red;
height: 200px;
width: 100%;
}
<div class="sec">
<a href="#" class="bigButtonLink bigButton">
Request Quote
</a>
</div>
<div class="sec" id="red">
</div>

Answer 1

Add text-align: center; to the section class and make the a selector display: inline-block; and that should center it and maintain the margin around the element as well.
.sec {
margin: 60px auto;
text-align: center;
}
.bigButtonLink {
text-decoration: none;
display: inline-block;
text-align: center;
margin: 50px auto;
}
.bigButton {
border: 1px solid #BE1E2D;
-webkit-appearance: none;
border-radius: 2px;
box-sizing: border-box;
background: #FFF;
font-family: 'Muli', sans-serif;
color: #B82222;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: 2px solid #B82222;
font-size: 2.3rem;
padding: 3rem 6rem 3rem 4.5rem;
}
#red {
background: red;
height: 200px;
width: 100%;
}
<div class="sec">
<a href="#" class="bigButtonLink bigButton">
Request Quote
</a>
</div>
<div class="sec" id="red">
</div>

Answer 2

You have to add text-align: center' to the selector.secanddisplay: inline-blockto.bigButtonLink`. Try this code.
.sec {
margin: 60px auto;
text-align: center;
}
.bigButtonLink {
text-decoration: none;
text-align: center;
margin: 50px auto;
display: inline-block;
}