Form with flex getting distorted after button pressed in Rails App using devise

I made a sign up page using flex and Rails view. They are aligned as I expected at the beginning like below:

However, when I click sign up button, the flash shows up and it gets distorted.

The code for the form is like below:

    <%= form_for(resource,
                             as: resource_name,
                             :class => "footer",
                             :html => { :class => "footer" },
                             url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>
    <div style="width:600px; flex-grow:1" class="center">

    <div class="horizontal">
      <div>
      <%= f.label :first_name %>
        <%= f.text_field :first_name,
                autofocus: true,
                :style => "width:100%",
                :class => "textfield textfield-control-no-wdith vertical-offset--teensy" %>
      </div>

        <div>
        <%= f.label :middle_name %>
        <%= f.text_field :middle_name,
            autofocus: true,
            :style => "width:100%",
            :class => "textfield textfield-control-no-wdith vertical-offset--teensy" %>
        </div>

      <div>
      <%= f.label :last_name %>
        <%= f.text_field :last_name,
            autofocus: true,
            :style => "width:100%",
            :class => "textfield textfield-control-no-wdith vertical-offset--teensy" %>
      </div>
    </div>

    <div class="vertical">
      <div>
            <%= f.label :email %><br/>
            <%= f.email_field :email,
                autofocus: true,
                :style => "width:100%",
                :class => "textfield textfield-control-no-wdith vertical-offset--teensy" %>
        </div>

      <div>
            <%= f.label :password %><br/>
            <%= f.password_field :password,
                autocomplete: "off",
                :style => "width:100%",
                :class => "textfield textfield-control-no-wdith vertical-offset--teensy" %>
        </div>

      <div>
            <%= f.label :password_confirmation %><br/>
            <%= f.password_field :password_confirmation,
                 autocomplete: "off",
                :style => "width:100%",
                :class => "textfield textfield-control-no-wdith vertical-offset--teensy" %>
        </div>
    </div>

    <!--Sign up button-->
    <div class="content-block signup-container vertical-offset--tiny" style="text-align:center">
        <button class="button button--long button--primary">
            Sign up
        </button>
    </div>

    </div>
    <% end %>

The CSS for this is :

<style >
.center {
    display: block;
margin-left: auto;
margin-right: auto;
}

.horizontal {
    display: flex;
}

.vertical {
    display: flex;
    flex-direction: column;
}

div div {
margin: 10px;
}

</style>

The code for populating flash is like below:

    <div id="flash-message-wrapper">
        <% flash.each do |type, message| %>
        <% if message.class == Array %>
        <div class="alert <%= alert_class_for(type) %> alert-dismissible fade in">
            <button type="button" class="close" data-dismiss="alert">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
            <% message.each do |message| %>
            <%= message %>
        </br>
        <% end %>
    </div>
<% else %>
    <div class="alert <%= alert_class_for(type) %> alert-dismissible fade in">
        <button type="button" class="close" data-dismiss="alert">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
        </button>
        <%= message %>
    </div>
    <% end %>
    <% end %>
</div>

Lastly, css for the flash is like following:

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
#flash-message-wrapper {
    position: fixed;
    top: 50px;
        left: 50%;
        margin-left: -250px;
    width: 500px;
}

Can anyone help me to figure out why pressing sign up button distorts the sign up page??