After searching everywhere online, I still can't find a solution to this particular issue. I have a parent div that centers all elements, but for some reason the checkbox won't center in Safari. I've tried adjusting it using various methods like margin and left/right properties, but nothing seems to budge that stubborn little thing from its original position. Even changing the width/height doesn't help.
.right-content{
position: fixed;
right: 0;
bottom: 0;
height: 0;
width: 300px;
overflow-y: hidden;
transition: 0.5s;
background-color: #DC0000;
text-align: center;
}
.right-content a {
padding: 3px 3px 3px 3px;
text-decoration: none;
color: black;
display: block;
transition: 0.3s;
}
<div id="sidebarMort" class="right-content">
<a href="javascript:void(0)" class="closebtn" onclick="closeSIdeBar()">×</a>
<a style="margin-top: 50px"><h2>Mortgage Calculator</h2></a>
<a><input name="income" type="text" id="income" placeholder="Annual Income"></a><br>
<p>Are you First Time Buyer?</p><br>
<a>Yes<input type="checkbox" id="ftb" value="ftb"></a><br>
<a><p>No</p><input type="checkbox" id="stb" value="stb"></a>
<a><input type="submit" class="btnOnBar" value="Calculate"></a>
</div>