Изменение ширины кнопки создает пробелы между другими кнопками. ⇐ CSS

[Anonymous]

Я делаю калькулятор с использованием тега кнопки, и я хочу изменить ширину только одной кнопки с id=equal, но когда я меняю ее ширину, между третьей и четвертой кнопкой в ​​каждой строке и шириной моей кнопки добавляются пробелы. таблица тоже меняется. Вот мой код HTML и CSS

Код: Выделить всё

table {

border: 1px solid rgb(180, 172, 172);
background-color: aliceblue;
margin-left: auto;
margin-right: auto;
border-spacing: 6px;
border-radius: 1rem;
outline: none;
-webkit-box-shadow:0px 10px 39px 10px rgba(62,66,66,0.22);
-moz-box-shadow: 0px 10px 39px 10px rgba(62,66,66,0.22);
box-shadow: 0px 10px 39px 10px rgba(62,66,66,0.22);
}
#result {
margin-top: 5px;
height: 11vh;
width: 350px;
background-color: #E8E8E8;
border: 1px solid #E8E8E8;
border-radius: 5rem;
}
input[type="button"] {
width: 60px;
height:9vh;
background-color: #E8E8E8;;
color: white;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5rem;
}
#equal {
width: 140px!important;
}

Код: Выделить всё

Я удалил тег ширины и попытался сделать то же самое с отступом, но с что кнопки вверху изменили свою ширину.

Подробнее здесь: https://stackoverflow.com/questions/781 ... er-buttons