diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 66711aa1804..bef24162924 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -32,6 +32,14 @@ body {
   }
 }
 
+.alert-wrapper {
+  margin-bottom: $gl-padding;
+
+  .alert {
+    margin-bottom: 0;
+  }
+}
+
 
 /* The following prevents side effects related to iOS Safari's implementation of -webkit-overflow-scrolling: touch,
 which is applied to the body by jquery.nicescroling plugin to force hardware acceleration for momentum scrolling. Side
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index a9a0b149049..54d02ee8e4b 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -22,9 +22,10 @@
         = render "layouts/nav/#{nav}"
   .content-wrapper{ class: "#{layout_nav_class}" }
     = yield :sub_nav
-    = render "layouts/broadcast"
-    = render "layouts/flash"
-    = yield :flash_message
+    .alert-wrapper
+      = render "layouts/broadcast"
+      = render "layouts/flash"
+      = yield :flash_message
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content{ id: "content-body" }
         = yield