Notification box css for full width

gistfile1.html

<style>
#notification-box {
  position: absolute;
  top: 25px; left: 0;
  width: 100%;
  padding: 0; margin: 0;
}
</style>

<div id="notification-box">
  <div class="alert alert-error">
    <a class="close" data-dismiss="alert">×</a>
      <div id="flash_alert">There was a problem...</div>
    </div>
  </div>
</div>

A helper option

  FLASH_TO_CSS = {
    notice: 'info',
    alert: 'danger'
  }

  def flash_notification(flash)
    content_tag :div, id: 'flash-notification' do
      flash.map do |name, msg|
        content = []
        content << content_tag(:a, '&#215;'.html_safe, class: 'close', 'data-dismiss' => 'alert')
        content << content_tag(:div, msg) #if msg.is_a? String
        css_class = FLASH_TO_CSS.key?(name) ? FLASH_TO_CSS[name] : name
        concat content_tag :div, content.join.html_safe, class: "alert alert-#{css_class}"
      end
    end
  end

<%# This file is structured in such a way as to allow both Rails and JavaScript
  # to use the same DOM for displaying flash messages.
  # %>

<% parent_display = flash.present? ? 'block' : 'none' -%>

<div class="flash-alerts" style="display: <%= parent_display %>;">
<%
   [ [ :error,   'alert-danger'  ],
     [ :warning, 'alert-warning' ],
     [ :info,    'alert-info'    ],
     [ :message, 'alert-success' ] ].each do |key, class_str|
       display = flash[key].present? ? 'block' : 'none'
-%>
  <div class="alert <%= "#{class_str}" %>" style="display: <%= display %>;">
    <a class="close" data-dismiss="alert">&#215</a>
    <div class="flash-msg">
      <% if flash[key] -%>
      <%= flash[key] %>
      <% end -%>
    </div>
  </div>
<% end -%>  
</div>

<% if flash.present? -%>
<script>
  $(".flash-alerts").delay(5000).fadeOut();
</script>
<% end -%>

    var setAlert = function (msg) {
      $('.flash-alerts .alert-danger .flash-msg').text(msg);
      $(".flash-alerts").show();
      $(".flash-alerts .alert-danger").show();
      $(".flash-alerts").delay(5000).fadeOut();
    };