I have a css question. when a number gets to double digits, the gap between itself and left right button increased. I tried to use boxsize property, but it does not work.

import { useSelector, useDispatch } from "react-redux";
import { decrement, increment } from "./counterSlice";
import "./Counter.css";
const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const clicks = useSelector((state) => state.counter.clicks);
  const dispatch = useDispatch();
  return (
    <div className="counter">
      <div>
        <button
          aria-label="increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span className="text">{count}</span>
        <button
          aria-label="decrement value"
          onClick={() => dispatch(decrement())}
        >
          decrement
        </button>
        <p>{clicks}</p>
      </div>
    </div>
  );
};

export default Counter;


.counter {
  margin: 60px auto;
  width: 20rem;
  background: aqua;
  padding: 1.25rem;
  border-radius: 15px;
  text-align: center;
  box-sizing: border-box;
}

.text {
  display: inline-block;
  margin: 0 15px;
}

I tried boxsize property and increased the gap between them. Those dont work.

I want to maintain the gap size when a number gets to double digits

[enter image description her