<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #7a64fa;
}
.container {
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
padding-top: 75px;
padding-right: 50px;
padding-bottom: 75px;
padding-left: 50px;
border-radius: 10px;
}
label {
font-size: 25px;
font-family: "Lucida Console", "Courier New", monospace;
}
input {
border-radius: 5px;
}
.ftm {
display: inline-block;
}
</style>
<meta charset="ISO-8859-1">
<title>Feet to Meter</title>
</head>
<body>
<div class="container">
<div class="ftm">
<label>Feet</label><br /> <input style="height: 40px;" type="number" name="feet">
</div>
<div class="ftm">
<label>Meter</label> <br /> <input style="height: 40px;" type="number" name="meter">
</div>
</div>
</body>
</html>I've been troubleshooting why the container DIV won't center properly on the screen. Despite adjusting the CSS properties for the container, I can't seem to get it perfectly centered. The issue might be related to the padding as well.