On smaller window sizes or certain small screen phones, the buttons are overlapping the heading. Take a look at the code below:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.x2 {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center
}
<body>
<div style="background-color: #E9ECEF">
<br><br>
<center>
<h1>Survey Management System</h1>
<center>
</div>
<div class="x2">
<p><button Class="btn btn-warning" onclick="document.location = 'user/registration.html'">Register</button></p>
<p><button Class="btn btn-warning" onclick="document.location = 'user/Login1.html'">Login</button></p>
<p><button Class="btn btn-warning" onclick="document.location = 'admin/alogin.html'">Admin Login</button></p>
</div>
I am new to coding and would greatly appreciate any help on this issue. Feel free to share any other suggestions you might have as well.