Помощник вида действия Rails "f.email_field" не показывает то же форматирование, что и другие помощники на той же странице

Question

У меня есть следующий код:

<div class="skinny_wrapper wrapper_padding">
  <%= form_for @contact do |f| %>
  <%= f.label :name %> <br>
  <%= f.text_field :name, required: true %>

  <br>

  <%= f.label :email %> <br>
  <%= f.email_field :email, required: true %>

  <br>

  <%= f.label :message %> <br>
  <%= f.text_area :message, as: :text %>

  <div class="hidden">
    <%= f.label :nickname %> <br>
    <%= f.text_field :nickname, hint: "leave this field blank" %>
  </div>

  <%= f.submit "Send Message", class: "button" %>

  <% end %>
</div>

Поле ввода адреса электронной почты не принимает такое же форматирование, как другие поля, и отображается следующим образом:

Форма электронной почтыпроблема

Я не уверен, почему это происходит.

Классы «skinny_wrapper» и «wrapper_padding» содержат следующие CSS:

.skinny_wrapper {
width: 80%;
max-width: 760px;
margin: 0 auto;
}

.wrapper_padding {
padding: 1.8rem 0;
}

Answer 1

.skinny_wrapper{
    position:relative;
   }
 .skinny_wrapper input[type="text"],input[type="email"],.skinny_wrapper textarea{
    width: 80%;
    max-width: 760px;
    margin: 0 auto;
    display:block; 
    }

    .wrapper_padding input[type="text"],input[type="email"],.wrapper_padding textarea{
    padding: 1.8rem 0; 
    }

Попробуйте и дайте мне знать, что вы получили!