diff --git a/website/css/device-frame.css b/website/css/device-frame.css
index 656dbed..c3362fc 100644
--- a/website/css/device-frame.css
+++ b/website/css/device-frame.css
@@ -113,14 +113,17 @@
 
 /* ---------------------------------------------------------------- phone */
 
+/* The bezel is the screen's margin, not the phone's padding: a percentage margin is of the phone's
+   own width, where a padding would be of whatever the phone is positioned in (the hero). */
 .device--phone {
-    padding: 3.4%;
+    display: flow-root;
     border-radius: 15% / 7%;
     background: var(--bezel);
     box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px var(--device-shadow);
 }
 
 .device--phone .device__screen {
+    margin: 3.4%;
     aspect-ratio: 393 / 852;
     border-radius: 12.5% / 5.8%;
 }