rails tutorial （第４版第５章）でloginページのみレイアウトが崩れてしまいます。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
rails tutorial(第４版第５章)を行っています。
ページの一番下に表示されるべきloginページのfooterレイアウトが右に表示されてしまいます。
他のページでは正常に下に表示されています。
cssはtutorial教材のものと同様です。
開発環境は、macOS, Cloud9を使用しています。

rails tutorial URL
https://railstutorial.jp/chapters/filling_in_the_layout?version=4.2

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

エラーメッセージ

該当のソースコード

custom.scss

/* footer */


footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

session/new.html.erb

<% provide(:title, "Log in") %>
<h1>Log in</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(:session, url: login_path) do |f| %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :password %>
      <%= link_to "(forgot password)", new_password_reset_path %>
      <%= f.password_field :password, class: 'form-control' %>
      
      <%= f.label :remember_me, class: "checkbox inline" do %>
        <%= f.check_box :remember_me %>
        <span>Remember me on this computer</span>
      <% end %>

      <%= f.submit "Login", class: "btn btn-primary" %>
    <% end %>
    
    <p>New user? <%= link_to "Sign up now!", signup_path %></p>
  </div>

layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
  
    <%= render 'layouts/rails_default' %> 
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <% flash.each do |message_type, message| %>
        <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
      <% end %>
      <%= yield %>
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %>
    </div>
  </body>
</html>

layouts/_footer.html.erb


<footer class="footer">
  <small>
    The <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   about_path %></li>
      <li><%= link_to "Contact", contact_path %></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

レイアウトが崩れているloginページ

正常に表示されている他ページ

試したこと

SCCSファイルの中で、 position:absolute;　を使ってfooter位置を固定しましたが、他の正常に表記されているページのレイアウトが崩れてしまいました。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/11/10 06:17

コードのマークダウンがちょこちょこおかしいので投稿前にプレビュー確認してください。質問は編集できます

m.ts10806

2020/11/10 06:18

>rails tutorial （第４版）「章」ではなくて？念のためURL提示してください

kanou-shimon

2020/11/10 06:26

失礼いたしました。訂正いたしました。

m.ts10806

2020/11/10 06:37 編集

質問本文にもありますね。「４番」あと、確認です。 >version=4.2 自身の環境と合ってますか？これから学習するのでしたらRails4でいいかは微妙かとは思います。

kanou-shimon

2020/11/10 06:44

versionはRails 5.1.6、ruby 2.6.3でした。こちらの違いで、エラーが起こっている可能性があるのでしょうか。また、rails tutorialの版に関しては、無料だからと安直に４版を選んでしまいました。最新のものを学習し直すべきでしょうか。

m.ts10806

2020/11/10 06:59

レイアウトだけの話であれば、バージョンの違いにより起きる可能性はほぼないです。出力されたhtmlが全く同じかどうかは確認すべきでは在りますが、いずれにしても懸念や問題切り分けのためにどちらかに合わせた方が良いですね。

no1knows

2020/11/10 07:09

すいません。こちら見ていなくて途中で回答してしまいました。。。 > また、rails tutorialの版に関しては、無料だからと安直に４版を選んでしまいました。 rails5も無料なのですが、rails6からjQueryの取り扱いが大きく変わっています。そのためできればRails6からのチュートリアルを使ったほうがいいかと思います。 1000円の投資は無駄にならないと思います。

kanou-shimon

2020/11/10 12:19

レイアウトに関して、承知いたしました。丁寧に回答していただきありがとうございます。

kanou-shimon

2020/11/10 12:20

同じフレームワークだからと思っていましたが、最新版は大きく変わったのですね。そちらを勉強するようにします。お二人とも、初心者の質問に優しく対応してくださりありがとうございました。

m.ts10806

2020/11/10 22:33

>rails5も無料なのですが、rails6からjQueryの取り扱いが大きく変わっています。それは知らなかった。私はBootstrap5を使おうとしてたのでjQuery要素排除して考えてました(ただ、私はレイアウト関係は単なる読み物で終わってますが…)