CSS/HTML - How to set inner padding inside input? - input

Question

When I try to set a padding it's not center anymore. It moves to the other side.
How can I set padding of the textbox input so that it's still aligned center?
table {
text-align: right;
}
#textfield {
float: left;
}
.textbox {
font-family: Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.44);
color: #333;
border: 1px solid #A4A4A4;
padding-left: 5px;
line-height: 1;
width: 225px;
height: 18px;
border-spacing: 8px;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td width="225"><label>First Name:</label></td>
<td width="225">
<input class="textbox" type="text" name="textfield" id="textfield">
</td>
</tr>
</tbody>
</table>

Answer 1

You can try adding
.textbox {
box-sizing: border-box;
}
table {
text-align: right;
}
#textfield {
float: left;
}
.textbox {
font-family: Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.44);
color: #333;
border: 1px solid #A4A4A4;
padding-left: 5px;
line-height: 1;
width: 225px;
height: 18px;
border-spacing: 8px;
box-sizing: border-box;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td width="225"><label>First Name:</label></td>
<td width="225">
<input class="textbox" type="text" name="textfield" id="textfield">
</td>
</tr>
</tbody>
</table>