Railsアプリケーションの本番環境とローカル環境でヘッダーのビューが違う。

前提・実現したいこと

railsでオリジナルアプリケーションを作っています。本番環境へアップロードしたのですが、ヘッダー部分に黒い斑点あったり、投稿するのボタンのUIが崩れてしまっていました。自分なりには調べてみたのですが、目ぼしき原因などは見つかりませんでした。アセットパイプラインとWebpackerを同時に使っているのでそれが原因なのかもしれないと考えています。

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

こちらはローカル環境のUIになります。

こちらは本番環境のUIです。ヘッダーの右端に黒い斑点があり、投稿ボタンのUIが崩れてしまっています。

該当のソースコード

application.html.erbです↓

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>StudyOutput</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7    <title>Study Outoput</title>
8    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
9    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
11    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
12    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
13    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
14  </head>
15
16  <body>
17
18    <div class="header sticky-top ">
19      <div class ="logo-block">
20        <div class="logo">
21          <%= link_to root_path, class: "text-decoration-none" do %>
22            <h2 class="w-2x h-2x shadow-none text-decoration-none", style="font-weight: bold;">StudyOutput</h2>
23          <% end %>
24        </div>
25      </div>
26      <ul class="mypage-block">
27        <li class= "header-list search"><dl class="searchbox">
28            <%= search_form_for @q_header, url: articles_path do |f| %>
29              <dt><%= f.text_field :title_or_tags_name_cont ,placeholder: '記事検索' %></dt>
30              <dd><%= f.submit ("検索") , class: 'search-btn'%></dd>
31            <% end %>
32            </dl>
33        </li>
34      <% if user_signed_in? %>
35        <% if unchecked_notifications.any? %>
36          <i class="fa fa-circle", style="color: gold;"></i>
37        <% end %>
38        <li class= "header-list">
39          <%= link_to  notifications_path do %>
40            <i class="fas fa-bell fa-2x"></i>
41          <% end %>
42        </li>
43        <li class= "header-list"><div class="dropdown">
44              <button class="btn dropdown shadow-none pt-0 h-25" type="button" id="dropdownMenuButton", data-toggle="dropdown">        
45                <% if current_user.avatar.attached? %>
46                  <p><%= image_tag(rails_blob_path(current_user.avatar), size: "50x50", class: "img-circle") %></p>
47                <% else %>
48                  <p><%= image_tag("default_user.png", size: "50x50", class: "img-circle") %></p>
49                <% end %> 
50              </button>
51              <div class="dropdown-menu dropdown-menu-right btn-sm">
52              <%= link_to "マイページ", user_path(current_user.id), class: 'dropdown-item'%>
53              <hr>
54              <%= link_to "ログアウト", destroy_user_session_path, class: 'dropdown-item', method: :delete %>
55              </div>
56            </div>
57        </li>
58        <li class= "header-list"><%= link_to new_article_path do %>
59              <button type="button" class="create-btn"><i class="fas fa-pencil-alt"></i>投稿する</button>
60            <% end %>
61        </li>
62      <% else %>
63        <li class= "header-list">
64          <%= link_to new_user_session_path do%>
65            <button type="button" class="create-btn">ログイン</button>
66          <% end %>
67        </li>
68        <li class= "header-list">
69        <%= link_to new_user_registration_path do%>
70          <button type="button" class="create-btn">新規登録</button>
71        <% end %>
72      <% end %>
73      </ul>
74    </div>
75    <%= breadcrumbs separator: " &rsaquo; " %>  
76    <%= yield %>
77  </body>
78</html>
79

css
1.header{
2  width: 100vw;
3  background-color: #006669;
4  height: 100px;
5  position: absolute;
6  display: flex;
7  justify-content: space-between;
8  margin-bottom: 5px;
9}
10.logo-block {
11  height: 60px;
12  width: 200px;
13  margin: 20px 0px 20px 20px;
14  padding: 15px;
15  position: relative;
16}
17.logo {
18  margin-left: 20px;
19  font-size: 20px;
20}
21
22h2 {
23  color: #fff;
24}
25.mypage-block {
26  height: 60px;
27  width: 500px;
28  margin: 20px 20px 20px 20px;
29  display: flex;
30  justify-content: flex-end;
31  padding-top: 15px;
32}
33.header-list{
34  margin-left: 0.5em;
35}
36
37.search{
38  margin-right: 0.5em;
39}
40
41.img-circle {
42  border-radius: 50%;
43  background-position: left top;
44  border: 3px solid #00cc00;
45}
46
47dl.searchbox{
48  width: 250px;
49  position:relative;
50  background-color:#fff;
51  border:1px solid #aaa;
52  border-radius:6px;
53}
54dl.searchbox dt{
55  padding:3px;
56}
57dl.searchbox dt input{
58  width:70%;
59  height:30px;
60  line-height:30px;
61  background:none;
62  border:none;
63}
64dl.searchbox dd{
65  position:absolute;
66  top:1px;
67  right:1px;
68  width:30%;
69}
70.search-btn{
71  display:block;
72  background:#5fad35;
73  width:100%;
74  height:36px;
75  line-height:36px;
76  border:none;
77  border-radius: 0 6px 6px 0;
78  color:#FFF;
79}
80
81.search-btn:hover {
82  background:#228B22;
83}
84
85.create-btn{
86  margin-top: 2px;
87  background-color: #5fad35;
88  height: 36px;
89  border: none;
90  border-radius: 6px;
91  color: #FFF;
92}
93
94.create-btn:hover {
95  background: #228b22;
96}
97
98.n-circle {
99  position: absolute;
100  padding-left: 1rem;
101  padding-top: 0rem;
102  color: #efa04c;
103}
104.fa-bell{
105  color: #FFF;
106  margin-top: 5px;
107}
108
109
110
111

試したこと

webpackerとcssがごっちゃのディレクトリ構造になっているからエラーが出ているのかと思い、Webpackerへの移行を試みましたが、難しくてできませんでした。ファイルはこのような構造になっています。

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

rails 6.0.0
bootstrap4
Font Awesome
を導入しています。

コンソールのエラー一覧

コンソールでみたところおそらくリセットCSSが読み込まれていないのと、リスト表示する際に出てくる黒丸が出てきているのだとわかりました。

maisumakun

2021/03/12 07:28

本番環境のブラウザコンソールにエラーが出ていたりはしませんか？

TTTTaison

2021/03/12 07:38

今補足情報にブラウザコンソールの写真を追加しました。エラーなどは見受けられなかったです

maisumakun

2021/03/12 07:53

そちらではなく、ブラウザでF12キーを押して出る方のコンソールではどうなっていますか？

TTTTaison

2021/03/12 08:04 編集

すみません。写真追加しました。YahooのapiであるリセットCSS(YUI3)が読み込まれていないというエラーとActive Strageのエラーが出ていました。Active Strageはいいとして、恐らく黒い丸はヘッダー内の要素をリスト表示した際に出てくるリストマークだということがわかりました。