diff --git a/src/components/ordering/MenuItemCustomizer.module.scss b/src/components/ordering/MenuItemCustomizer.module.scss
index ed5bdd2..1682386 100644
--- a/src/components/ordering/MenuItemCustomizer.module.scss
+++ b/src/components/ordering/MenuItemCustomizer.module.scss
@@ -63,6 +63,7 @@
   width: 2rem;
   height: 2rem;
   padding: 0;
+  margin-right: 0;
   border-radius: 50%;
   border: 1px solid $color-border;
   background: $color-background;
@@ -71,6 +72,12 @@
   cursor: pointer;
   transition: border-color 0.15s ease;
 
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   &:hover:not(:disabled) {
     border-color: $color-primary;
   }
diff --git a/src/components/ordering/MenuItemCustomizer.tsx b/src/components/ordering/MenuItemCustomizer.tsx
index f941626..3b1c62c 100644
--- a/src/components/ordering/MenuItemCustomizer.tsx
+++ b/src/components/ordering/MenuItemCustomizer.tsx
@@ -84,7 +84,7 @@ export const MenuItemCustomizer = ({
             disabled={quantity === 0}
             aria-label={`Remove one ${item.name}`}
           >
-            <span aria-hidden="true">−</span>
+            <div aria-hidden="true" className={styles.icon}>−</div>
           </button>
           <AnimatedNumber value={quantity} className={styles.count} />
           <button
@@ -93,7 +93,7 @@ export const MenuItemCustomizer = ({
             onClick={() => onAdd(item.id, checkedOptionIds)}
             aria-label={`Add one ${item.name}`}
           >
-            <span aria-hidden="true">+</span>
+            <div aria-hidden="true" className={styles.icon}>+</div>
           </button>
         </div>
       </div>