HTML/CSS - Text can't be centered inside a button - html

Question

So, it's my first time getting into HTML/CSS and naturally, I'm having problems with certain parts.
I made a "Contine" button in my setup.html and gave it a class so I can style it in my styles.css, now the problem is that text-align center doesnt work on the button. I also have a "Start" button in my index.html, but strangely text-align center works there. I tried giving both buttons the same class and different classes. I'm not sure what to do at this point in time.\
My Button in HTML:
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>
My CSS:
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
max-width: 280px;
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
Like I said the #contine part in my styles.css is the exact same for the "start" button, but it only works for the start button.

Answer 1

Problem is with max-width: 280px; and padding: 10px 100px; of button.
you are giving padding of 200px on the horizontal scale and then you are limiting button width to 280px. which leaves only 80px for text within. Remove button width for a better look of a button. Alternatively, you can trade off any of the CSS property over others.
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
/* max-width: 280px; */
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>