Trying to create a link that resembles a button, but facing an issue when the anchor text spans more than one word causing it to wrap onto the next line. This results in the border around the link/button not wrapping around the entire element. It appears as if the border is breaking (unsure of the correct terminology).
Unfortunately, uploading an image for reference keeps failing. Please refer to the example below:
If anyone has a solution on how I can achieve this, please advise.
.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">
<a href="#" class="mainLink">Hard Guarding Solutions</a>
</div>
</div>