diff --git a/CHANGELOG b/CHANGELOG
index 1cf8730cda19656911f77f94231fba392801fd8e..3fdce5c2d421cef0d7dc63be17a7a4c64a849864 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -4,6 +4,7 @@ v 8.9.0 (unreleased)
   - Fix error when CI job variables key specified but not defined
   - Fix pipeline status when there are no builds in pipeline
   - Fix Error 500 when using closes_issues API with an external issue tracker
+  - Align text of flash messages to left side of page content !4755 (winniehell)
   - Add more information into RSS feed for issues (Alexander Matyushentsev)
   - Bulk assign/unassign labels to issues.
   - Ability to prioritize labels !4009 / !3205 (Thijs Wouters)
diff --git a/app/assets/javascripts/flash.js.coffee b/app/assets/javascripts/flash.js.coffee
index 4f73d215b8561a2a391a026bd177e99ca0fe8fd2..2a5f183da448ddad61b30beb3d6dd2b4eb5db420 100644
--- a/app/assets/javascripts/flash.js.coffee
+++ b/app/assets/javascripts/flash.js.coffee
@@ -1,16 +1,30 @@
 class @Flash
   constructor: (message, type = 'alert')->
-    @flash = $(".flash-container")
-    @flash.html("")
+    @flashContainer = $(".flash-container")
+    @flashContainer.html("")
 
-    innerDiv = $('<div/>',
-      class: "flash-#{type}",
+    @flashContainer.addClass('flash-container-stretched')
+
+    flash = $('<div/>',
+      class: "flash-#{type}"
+    )
+
+    backgroundDiv = $('<div/>',
+      class: 'flash-background'
+    )
+    backgroundDiv.appendTo(flash)
+
+    textDiv = $('<div/>',
+      class: 'flash-text',
       text: message
     )
-    innerDiv.appendTo(".flash-container")
+    textDiv.appendTo(flash)
+
+    flash.click -> flash.fadeOut()
 
-    @flash.click -> $(@).fadeOut()
-    @flash.show()
+    flash.appendTo(@flashContainer)
+    @flashContainer.show()
 
   pinTo: (selector) ->
-    @flash.detach().appendTo(selector)
+    @flashContainer.removeClass('flash-container-stretched')
+    @flashContainer.detach().appendTo(selector)
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 1bfd0213995c45b4bdbd034803eb41b7dbc928bc..620199fbe271974787c0caf8575d4f489691e33b 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -5,15 +5,48 @@
   width: 100%;
   z-index: 100;
 
-  .flash-notice {
+  .flash-background, .flash-text {
     @extend .alert;
-    @extend .alert-info;
     margin: 0;
   }
 
   .flash-alert {
-    @extend .alert;
-    @extend .alert-danger;
-    margin: 0;
+    .flash-background, .flash-text {
+      @extend .alert-danger;
+    }
+  }
+
+  .flash-notice {
+    .flash-background, .flash-text {
+      @extend .alert-info;
+    }
+  }
+
+  /*
+   * Only used for stretched container
+   */
+  .flash-background {
+    display: none;
   }
 }
+
+.flash-container-stretched {
+  .flash-background {
+    display: block;
+    height: $flash-height;
+    left: 0;
+    position: fixed;
+    width: 100%;
+    z-index: 10;
+  }
+
+  .flash-text {
+    background: none;
+    border: none;
+    padding-left: 0;
+    padding-right: 0;
+    position: relative;
+    z-index: 20;
+  }
+}
+
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 5c68f90e3439be59340100e9bf684ee6a5160d5e..59ecb4d4a54455a93b282f7f8597bc2f114f8982 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -426,7 +426,7 @@
   margin-top: $header-height + 2;
 
   .right-sidebar {
-    top: ($header-height * 2) + 2;
+    top: ($header-height * 2 + $flash-height) + 2;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c37574ca7a1b9d9494b542c46dcb204b18915805..e5f46ca1c3c30c5293243607a6c9b73efbcb5aa5 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -85,6 +85,7 @@ $todo-alert-blue: #428bca;
 $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
+$flash-height: $header-height;
 
 /*
  * Color schema
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 3784010348a0dcdbfa0876081f16283d08c7197d..269a2f69d5589e5a98c2df2052c266dde39e1b5d 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -37,6 +37,14 @@
   img {
     max-width: 100%;
   }
+
+  .flash-container {
+    margin-top: $gl-padding-top;
+
+    .flash-text {
+      border-radius: $border-radius-base;
+    }
+  }
 }
 
 .note-textarea {
diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml
index cc8ea066cb9b98e7b014e625fc0d05fbd803365e..1f3cc3de3fb044269016f91dfa8593d81568e867 100644
--- a/app/views/layouts/_flash.html.haml
+++ b/app/views/layouts/_flash.html.haml
@@ -1,8 +1,14 @@
 .flash-container
   - if alert
-    .flash-alert
-      = alert
-
+    - flash_type = 'alert'
+    - flash_message = alert
   - elsif notice
-    .flash-notice
-      = notice
+    - flash_type = 'notice'
+    - flash_message = notice
+
+  - if flash_type
+    %div{:class => "flash-#{flash_type}"}
+      .flash-background
+      .flash-text
+        = flash_message
+
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 199ab3c38c3eecb81822554046ada54e667d40a8..60a358b5053353ea500858a295d0f48da205ac6a 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -22,9 +22,9 @@
         = render "layouts/nav/#{nav}"
   .content-wrapper{ class: "#{layout_nav_class}" }
     = render "layouts/broadcast"
-    = render "layouts/flash"
-    = yield :flash_message
     %div{ class: (container_class unless @no_container) }
       .content
         .clearfix
+          = render "layouts/flash"
+          = yield :flash_message
           = yield
diff --git a/app/views/layouts/ci/_page.html.haml b/app/views/layouts/ci/_page.html.haml
index 2e56d0ac6a33fdfa1cfa8dc24a76920c36c54e82..d58bda4087c2e4caddbbef8f881906c49ae858c8 100644
--- a/app/views/layouts/ci/_page.html.haml
+++ b/app/views/layouts/ci/_page.html.haml
@@ -14,9 +14,9 @@
         .username
           = current_user.username
   .content-wrapper
-    = render "layouts/flash"
     = render 'layouts/ci/info'
     %div{ class: container_class }
       .content
         .clearfix
+          = render "layouts/flash"
           = yield