I created a simple sign-up form for my school project where users can choose their roles. I'm facing an issue with the border under the anchor tag and I need help fixing it. How can I ensure that the space at the top is equal to the bottom as well?
Take a look at the image here
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.center {
position: absolute;
top: 150px;
width: 99%;
text-align: center;
font-size: 18px;
}
.box {
margin: auto;
border: 1px solid #ccc;
width: 30%;
padding: 15px;
}
a {
background-color: #333;
text-decoration: none;
display: block inline;
color: white;
padding: 14px 20px;
margin: 8px 0px;
border: none;
cursor: pointer;
width: 100%;
opacity: 1.5;
}
a:hover {
background-color: #ddd;
color: black;
}
ul {
list-style-type: none;
}
li {
display: inline;
}<div class="center">
<div class="header">
<h2>WELCOME TO SMK USJ 12<br/> ENGLISH QUIZ</h2>
</div>
<form action="role.php" method="post">
<div class="box">
<h3>Choose your role<br/> You are a...</h3>
<a href="teacher.php">Teacher</a></button>
<a href="student.php">Student</a>
</div>
</div>