サインアップ登録時にバリデーションのエラーが表示されても枠内に文字を納めたい

サインアップページにて、エラー表示されても枠内に文字を納めたい

Ruby on railsでdeviseを使って、Amazonみたいなアカウント登録ページを作ったが、
エラーが表示されたら、

発生している問題・エラーメッセージ

該当のソースコード

<%= render "shared/second-header"%>

<div class="box">
  <div class="box-inner">
    <%= form_with model: @user, as: resource_name, url: user_registration_path, local: true do |f| %>

      <h1 class='logo'>サインアップ</h1>
        <%= render 'shared/error_messages', model: f.object %>
      <div class="box-name">
        <%= f.label :nickname, "名前" %><br />
        <%= f.text_field :nickname, autofocus: true, autocomplete: "nickname" %>
      </div>
      <div class="box-email">
        <%= f.label :email, "Eメール" %><br />
        <%= f.email_field :email, id:"email", autofocus: true, autocomplete: "email" %>
      </div>
      <div class="box-password">
        <div class="a-row">
          <div class="column-left">
            <%= f.label :password, "パスワード" %>
          </div>
        </div>
        <%= f.password_field :password, id:"password", autocomplete: "current-password" %>
      </div>
      <div class="box-password">
        <%= f.label :password_confirmation, "パスワード（確認）" %><br />
        <%= f.password_field :password_confirmation, autocomplete: "off" %>
      </div>
      <div class="box-registrations">
        <%= f.submit "アカウント作成" %>
      </div>
    <% end %>
  </div>
</div>

<%= render "shared/second-footer"%>

CSS
1* {
2  margin: 0px;
3  padding: 0px;
4  text-decoration: none;
5}
6
7.box {
8  width: 350px;
9  height: 450px;
10  margin: 60px auto 0;
11  border-radius: 4px;
12  border: 1px #ddd solid;
13  
14}
15
16.box-inner {
17  padding: 20px 26px;
18  min-height: auto;
19}
20
21.logo {
22  font-weight: 400;
23  font-size: 28px;
24  line-height: 1.2;
25  margin-bottom: 10px;
26  padding-bottom: 4px;
27  color: #111111;
28  font-family: arial black;
29}
30
31
32
33.box-name {
34  margin-bottom: 13px;
35  display: flex;
36  flex-direction: column;
37}
38
39.box-email {
40  margin-bottom: 13px;
41}
42
43.box-password {
44  margin-bottom: 22px;
45}
46
47.box-name label, .box-email label, .box-password label {
48  font-weight: 700;
49  font-size: 13px;
50  padding-left: 2px;
51  padding-bottom: 2px;
52}
53
54.box-name input[type="text"], .box-email input[type="email"], .box-password input[type="password"] {
55  border-style: none;
56  box-sizing: border-box;
57  width: 100%;
58  height: 31px;
59  border: 1px solid #a6a6a6;
60  box-shadow: 0 1px 0 rgba(0,0,0,.07) inset;
61  border-radius: 3px;
62  padding: 0 7px;
63}
64
65.column-left {
66  float: left;
67}
68
69.column-right {
70  float: right;
71}
72
73.box-password a {
74  font-size: 13px;
75}
76
77.box-login {
78  margin-bottom: 26px;
79}
80
81 .box-registrations input[type="submit"] {
82  border-style: none;
83  width: 100%;
84  background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
85  border-radius: 3px;
86  border: 1px #a88734 solid;
87  color:black;
88} 
89
90.box-registrations input[type="submit"]:hover {
91  cursor: pointer;
92  background: #f0c14b;
93}
94
95