diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index d208fa2..125bc25 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -158,7 +158,7 @@ $sizes: 80, 70, 60, 50, 40, 30, 20;
 @media (min-width: 1024px) {
   @each $size in $sizes {
     .size-#{$size} {
-      width: $size + '%';
+      width: percentage($size / 100);
     }
   }
 }
diff --git a/static/css/webslides.css b/static/css/webslides.css
index 28f0842..bb859db 100644
--- a/static/css/webslides.css
+++ b/static/css/webslides.css
@@ -599,19 +599,19 @@ figure.alignleft {
 
 @media (min-width: 1024px) {
   .size-80 {
-    width: "80%"; }
+    width: 80%; }
   .size-70 {
-    width: "70%"; }
+    width: 70%; }
   .size-60 {
-    width: "60%"; }
+    width: 60%; }
   .size-50 {
-    width: "50%"; }
+    width: 50%; }
   .size-40 {
-    width: "40%"; }
+    width: 40%; }
   .size-30 {
-    width: "30%"; }
+    width: 30%; }
   .size-20 {
-    width: "20%"; } }
+    width: 20%; } }
 
 pre,
 code {