CSS button not aligning correctly - html

Question

I have made this button by editing "Simple Hover Effect by Vincent Durand". But the problem is that some css in my blog is overlapping. So it is not aligning to middle correctly. I cant find which one it may be. I tried using !important tag in some places. But I guess it didn't work out. What I need to know where should I use !important in this code to align the button to middle? Or will I need a new css element to do that?
<!-- Awesome button css Start -->
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>

Answer 1

Add *{box-sizing:border-box;} to ur css
<!-- Awesome button css Start -->
*{box-sizing:border-box;}
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>

Answer 2

Use this CSS to center align the button
.btn-green {
background-color: #1AAB8A;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<!-- Awesome button css Start -->.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,
.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,
.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->.btn-green {}
<div class="btn-margin">
<a class="btn btn-green" href="https://myneobuxportal.blogspot.com/p/answer-gamer-quiz-v2.html">
Click Here To See Answers
</a>
</div>

Answer 3

add one parent div and set this div text-align: center;
<!-- Awesome button css Start -->
.demo{
text-align: center;
}
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="Demo">
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
</div>

Answer 4

In the end the problem was with the comment :(
I used html comment in css. That's why this happened. Thanks #CharuMaheshwari for mentioning that out. Also another thanks for other 3 answers. All of them worked.
With #CharuMaheshwari help this is the code I decided to use.
/* Awesome button css Start */
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
/* Awesome button css End */
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>