diff --git a/docs/examples/introduction/timers.css b/docs/examples/introduction/timers.css
index ff92cc771..f7030e623 100644
--- a/docs/examples/introduction/timers.css
+++ b/docs/examples/introduction/timers.css
@@ -6,6 +6,7 @@ TimerWidget {
     margin: 1;
     padding: 0 1;
     transition: background 300ms linear;
+    min-width: 50;
 }
 
 TimerWidget.started {   
diff --git a/src/textual/screen.py b/src/textual/screen.py
index b8f6af01f..993fdb3f5 100644
--- a/src/textual/screen.py
+++ b/src/textual/screen.py
@@ -33,6 +33,8 @@ class Screen(Widget):
 
     CSS = """
     Screen {
+        color: $text-background;
+        background: $background;
         layout: vertical;
         overflow-y: auto;
     }
diff --git a/src/textual/widget.py b/src/textual/widget.py
index 73cc137c6..af731ae51 100644
--- a/src/textual/widget.py
+++ b/src/textual/widget.py
@@ -821,10 +821,14 @@ class Widget(DOMNode):
             # Adjust the region by the amount we just scrolled it, and convert to
             # it's parent's virtual coordinate system.
             region = (
-                region.translate(-scroll_offset)
-                .translate(-widget.scroll_offset)
-                .translate(container.virtual_region.offset)
-            ).intersection(container.virtual_region)
+                (
+                    region.translate(-scroll_offset)
+                    .translate(-widget.scroll_offset)
+                    .translate(container.virtual_region.offset)
+                )
+                .grow(container.styles.margin)
+                .intersection(container.virtual_region)
+            )
             widget = container
         return scrolled