本番環境だと、トップページのビューが崩れてしまう

前提・実現したいこと

オリジナルアプリを作成しています。
デプロイした後、本番環境で実装した機能を試したのですが、実装した機能は全て正しく動いているのですが、トップページ（あとは、マイページ）のレイアウトが少し崩れてしまいます。
ローカル環境のトップページ
https://gyazo.com/239b6b9c8417a187e611a70aa89cdbd8

本番環境のトップページ
https://gyazo.com/a79f7095eaa8213e0d9e1bfcc81f95d1

タイトルの背景色（緑の）がずれてしまっています。

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

一つ目
https://gyazo.com/8e17e328394d6842d81da9b53037747b

二つ目
https://gyazo.com/1611d3b653492f5ce2528d7da102d02c
↑
みづらくてすみません（Gyazoで撮ると、なぜか上手く写真が映らないので、GIFで撮っています）

app/views/index.html.erb

<div class="title">
  <ul class="top-botton">
    <% if user_signed_in? %>
    <li><%= link_to current_user.name, user_path(current_user.id), class:"user-name" %></li>
    <li><%= link_to 'New Article', new_article_path, class:"new-article" %></li>
    <% else %>
    <li><%= link_to 'Log in', new_user_session_path, class: "login" %></li>
    <li><%= link_to 'Sign up', new_user_registration_path, class: "sign-up" %>
    <% end %>
  </ul>
  <div class="title-content">B-blog</div>
</div>

<div class="main">
  <% @articles.each do |article| %>
  <li class="list">
    <div class="article-index-name">
      <%= article.user.name %>
    </div>
      <%= link_to article_path(article.id), class:"article-index-name", method: :get do %>
      <div class="article-img-content">
        <%= image_tag article.image, class:"article-img"%>
      </div>
      <div class="article-info">
        <div class="article-index-name">
          <%= article.title%>
        </div>
        <div class="article-index-name">
          <%= article.category.name%>
        </div>
      </div>
      <% end %>
  </li>
  <% end %>
</div>

index.html.erbに対応するCSSファイル

.title {
  background-color: #28cc95;
  width: 100vw;
  height: 200px;
}

.title-content {
  text-align: center;
  font-size: 12vh;
  font-family: serif;
}

.top-botton {
  display: flex;
  list-style: none;
  justify-content: flex-end;
  align-items: flex-start;
}

.login {
  text-decoration: none;
  font-size: 20px;
  font-family: serif;
  line-height: 32px;
  margin-right: 3vw;
  color: #212221;
}

.sign-up {
  text-decoration: none;
  font-size: 17px;
  font-family: serif;
  line-height: 32px;
  margin-right: 3vw;
  color: #212221;
}

.new-article {
  text-decoration: none;
  font-size: 20px;
  font-family: serif;
  line-height: 32px;
  margin-right: 2vw;
  color: #212221;
}

.main {
  margin: 20px 20vw;
}

.list {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 5px;
  padding: 10px;
}

.article-img {
  width: 30vh;
  height: 30vh;
}

.article-index-name {
  text-decoration: none;
  text-align: center;
  color: #212221;
  font-size: 20px;
  font-family: serif;
}

試したこと

index.html.erbの配置を変えてみたりしたのですが、結局ローカル環境とは同じレイアウトになりませんでした...

どなたかこの問題を解決していただけると幸いです。

Gyazo GifのURLをクリックすると画像の方に遷移する方法がわからずすいません。

先程S3を導入したのですが、ビューのズレは直りませんでした。

mather

2021/08/31 10:17

ログイン状態に差異があるようですが、本番でもログインしてみてはどうでしょうか？

YugoTokonami

2021/08/31 11:46

回答ありがとうございます！「本番でのログイン」とはどういうことでしょうか？すいません。まだプログラミングを始めて、まもなくて... ターミナルで「heroku apps:info」を入力し、そこで出力されたURLからブラウザで確認する手順以外に何かあるということでしょうか？

mather

2021/08/31 14:51

いえ、提示された動画の右上を見るとわかるのですが、本番の方は login signup となってますよね。違いがあるというときはできるだけ同条件でチェックしましょう。

YugoTokonami

2021/09/01 00:52

ありがとうございます！本番環境でもログイン状態のgyazo gifを添付し直しました。みていただけると幸いです。

neko_daisuki

2021/09/02 03:45

1. chrome でウェブサイトを開きます 2. F12を押します 3. Network タブを開きます 4. Ctrl + R を押します表示される結果に status が 200 以外のURLは存在しますか？

YugoTokonami

2021/09/02 05:13

回答ありがとうございます！本番環境でNetworkタブを開いたところ、エラー文？のようなものがいくつか発見されました！一応質問おエラーメッセージ部分に添付させていただきました。ここが原因？なのかと思いますが、Networkタブを見たことがないので、あまりわかりません...

neko_daisuki

2021/09/02 05:18

https のページから http の css を読み込もうとして失敗してレイアウトが崩れているようです。詳しくは Mixed content で検索してください。おそらく application.html.erb に書いてある cssreset-min.css を http から https に書き換えれば修正されると思います。

YugoTokonami

2021/09/02 07:55

言われた通り、application.html.erbを編集したところ、ローカル環境と、本番環境でビューが同じになりました！ありがとうございます！