How do I get rid of the space between the zero and the rest of the calculator?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Calculator</title> <link href="CalcMain.css" rel="stylesheet"> <script src="CalcScript.js"></script> </head> <body> <div id="background"> <div id="main"> <input type="text" id="display" name="output"> <br> <input type="button" class="btn-opr" value="%" onclick=""> <input type="button" class="btn-opr" value="/" onclick=""> <input type="button" class="btn-opr" value="#" onclick=""> <input type="button" id="btn-clear" value="c" onclick=""> <br> <input type="button" class="btn-num" value="7" onclick=""> <input type="button" class="btn-num" value="8" onclick=""> <input type="button" class="btn-num" value="9" onclick=""> <input type="button" class="btn-opr" value="-" onclick=""> <br> <input type="button" class="btn-num" value="4" onclick=""> <input type="button" class="btn-num" value="5" onclick=""> <input type="button" class="btn-num" value="6" onclick=""> <input type="button" class="btn-opr" value="+" onclick=""> <br> <input type="button" class="btn-num" value="1" onclick=""> <input type="button" class="btn-num" value="2" onclick=""> <input type="button" class="btn-num" value="3" onclick=""> <input type="button" class="btn-total" value="=" onclick=""> <input type="button" class="btn-zero" value="0" onclick=""> <input type="button" class="btn-num" value="." onclick=""> <br> </div> </div> </body> </html> //THE CSS .btn-num { width: 50px; height: 50px; padding: 5px; background-color:#4286f4; } .btn-opr { width: 50px; height: 50px; padding: 5px; background-color:#e28131; } .btn-zero { width: 97px; height: 50px; padding: 5px; background-color:#4286f4; } .btn-total { width: 50px; height: 100px; padding: 5px; background-color:#e28131; } #btn-clear { width: 50px; height: 50px; padding: 5px; background-color: red; } #background { width: 220px; } #main { d

html css html5 css3

1st May 2018, 1:58 PM

Tyrell Reid