diff --git a/docs/render/recipe.css b/docs/render/recipe.css
index f29aea7..5e14ce9 100644
--- a/docs/render/recipe.css
+++ b/docs/render/recipe.css
@@ -246,10 +246,13 @@ li:hover .noun {
   margin-left:2em;
 }
 .ingredients .quantity {
-  float:left;
-  margin-left:-2.5em;
-  width:2em;
-  text-align:right;
+  float:
+  left;
+  margin-left: -2.2em;
+  min-width: 1.8em;
+  text-align:
+  right;
+  margin-right: 0.3em;
 }
 
 .ingredient.complete,
diff --git a/docs/render/recipe.js b/docs/render/recipe.js
index 781aacb..cefacdf 100644
--- a/docs/render/recipe.js
+++ b/docs/render/recipe.js
@@ -142,7 +142,7 @@ function highlightStep(e) {
 
 }
 
-const ingredientMatch = /^(?:A )?([\/0-9 \u00BC-\u00BE\u2153-\u215E\u2009]*)\s(.*)/
+const ingredientMatch = /^(?:A )?([\-\/0-9 \u00BC-\u00BE\u2153-\u215E\u2009]*)\s(.*)/
 
 
 function ingredientEl(string, terms) {
@@ -154,9 +154,9 @@ function ingredientEl(string, terms) {
   let match = FRACTION_MAP.replace(clean(string)).match(ingredientMatch);
 
   if (match) {
-    return [m("span.quantity", match[1].replace(" ", "\u202F")), m("div", {innerHTML:highlightTerms(match[2], terms)})]
+    return [m("span.quantity", match[1].replace(" ", "\u202F")), " ", m("span", {innerHTML:highlightTerms(match[2], terms)})]
   }
-  return [m("span.quantity", ""), m("div", {innerHTML:string})];
+  return [m("span.quantity", ""), m("span", {innerHTML:string})];
 }
 
 function highlightTerms(string, terms) {