Getting border to wrap around entirety of element - html

Question

I am creating a link that looks like a button. One thing I am running into is if I have more than one word for the anchor the link/button text is going to the next line. It is fine if the anchor text goes to the next line, but the border then does not wrap around the entire thing. It looks as if the border breaks (not sure of the correct terminology).
See the image below for a reference: (Sorry image upload keeps failing)
Does anyone know how I can
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>

Answer 1

You just need to set display: block to your .mainLink
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
display: block;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>