diff --git a/_assets/css/responsive_sizes.scss b/_assets/css/responsive_sizes.scss
index 034ad46..c4d47c6 100644
--- a/_assets/css/responsive_sizes.scss
+++ b/_assets/css/responsive_sizes.scss
@@ -1,14 +1,18 @@
+@use "sass:map";
+
 @each $prop, $abbrev in (width: w, height: h) {
   @each $bpname,$bpsize in $grid-breakpoints {
-    @media (min-width: $bpsize) {
-      @each $size, $length in $sizes {
-        .#{$abbrev}-#{$bpname}-#{$size} {
-          #{$prop}: $length;
-        }
-        .m#{$abbrev}-#{$bpname}-#{$size} {
-            max-#{$prop}: $length;
-        }
+      @media (min-width: $bpsize) {
+          $props: map-get($utilities, $prop);
+          $propValues: map-get($props, 'values');
+          @each $size, $length in $propValues {
+              .#{$abbrev}-#{$bpname}-#{$size} {
+                  #{$prop}: $length;
+              }
+              .m#{$abbrev}-#{$bpname}-#{$size} {
+                  max-#{$prop}: $length;
+              }
+          }
       }
-    }
   }
 }
diff --git a/_assets/css/style.scss b/_assets/css/style.scss
index 6cbcf8f..65a4789 100644
--- a/_assets/css/style.scss
+++ b/_assets/css/style.scss
@@ -1,3 +1,5 @@
+$navbar-padding-x: 1rem;
+
 @import 'bootstrap';
 @import 'font-awesome-sprockets';
 @import 'font-awesome';
@@ -17,7 +19,7 @@
 
 .bd-sideboard {
   aside {
-    padding: $table-cell-padding-sm;
+    padding: $table-cell-padding-x-sm;
   }
 
   header {
diff --git a/_layouts/default.html b/_layouts/default.html
index f361e3b..39f856d 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -59,7 +59,7 @@
 		  {% endif %}
 		</div>
 
-		<main class="bg-white rounded-large order-1 order-md-2 col-12 col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content" role="main">
+		<main class="bg-white rounded-large order-1 order-md-2 col-12 col-md-9 col-xl-10 py-md-3 ps-md-5 bd-content" role="main">
 		  <section class="entry-content container-fluid">
 			{% if page.title %}
 			<header class="entry-header">
diff --git a/index.html b/index.html
index abbd83e..a6a0b7d 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@ title: Introduction
 <section id="webdeveloper">
 <h2>Dan Jones, the Web Developer</h2>
 
-<figure class="figure float-md-right mw-xs-100 mw-md-50">
+<figure class="figure float-md-end mw-xs-100 mw-md-50">
   <img src="https://res.cloudinary.com/danjones000/image/upload/v1518462377/danielrayjones/C64c_system.jpg"
 	   class="figure-im img-fluid" alt="Commodore 64" />
   <figcaption class="figure-caption">