railsアプリにて、herokuへデプロイ後、一部レイアウトが崩れる事象が発生。こちらを解消させたいです。

Question

前提・実現したいこと

現在、オリジナルアプリを作成しています。
一通り機能を実装し、herokuへデプロイしたところ、
一部レイアウトが崩れ、開発環境と異なるレイアウトになってしまう事象が発生しました。
レイアウト崩れを解消させたいです。
アセットパイプラインの設定に問題があり、方法を試していたのですが、
解決に至らず、他の要因があるのか、設定方法が他にあるのか、
どなかたご教示いただけると幸いです。

何卒、よろしくお願い致します。

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

ローカル環境での表示
https://gyazo.com/da4a1a14b7f1a9be529a683b3ecf814e
本番環境での表示
https://gyazo.com/bf8030118527b969578bf961bea58bfb

該当のソースコード

貼り付けたトップページ

<%= render "shared/header" %>

<div class='main'>
  <div class='book-contents'>
    <div class='new-str'><b>☆★新着投稿★☆<b></div>
    <ul class='book-lists'>
      <% @books.each do |book| %>
      <li class='list'>
        <%= link_to book_path(book.id), class:'new-link' do %>
        <%= image_tag book.image, class: "book-img" %>
        <div class='book-info'>
          <div class='book-name'>
            <%= book.name %>
          </div>
          <div class='book-genre'>
            <%= book.genre.name %>
          </div>
        </div>
        <% end %>
      <% end %>
      </li>
    </ul>
  </div>
</div>

<%= link_to(new_book_path, class: 'listing-btn') do %>
  <b><span class='listing-btn-text'>投稿する</span></b>
  <%= image_tag 'book.png', size: '185x50', class: 'listing-btn-icon' %>
<% end %>

<div class='header'>
  <div class='head-title'>Book Talk
  </div>
  <div class='search-form'>
    <%= search_form_for @p, url: search_books_path do |f| %>
      <%= f.label :genre_id_eq, 'ジャンルから探す', class: 'search-text' %>
      <%= f.collection_select(:genre_id_eq, Genre.all, :id, :name, {}, {class: 'search-select'}) %>
      <%= f.submit '検索', class: "search-btn"%>
    <% end %>
  </div>
    <div class='nav'>
      <ul class='lists'>
        <% if user_signed_in? %>
          <li><%= link_to current_user.nickname, "#", class: "nickname" %></li>
          <li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "logout" %></li>
        <% else %>
          <li><%= link_to '新規登録', new_user_registration_path, class: "sign-up1" %></li>
          <li><%= link_to 'ログイン', new_user_session_path, class: "login" %></li>
        <% end %>
      </ul>
    </div>
  </div>
</div>

index.css

/* 投稿本一覧ページ */
.main {
  text-align: center;
}

.new-str {
  color: orange;
  font-size: 20px;
  background-color: lightgoldenrodyellow;
  border-bottom: solid 1px orange;
}

.book-contents {
  height: 80vh;
  position: relative;

}

.book-lists {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: lightgoldenrodyellow;
}

.list {
  margin: 10px 15px;
  list-style: none;
}

.book-img {
  width: 18vw;
  height: 28vh;
}

.book-info {
  border: solid 1px lightslategray;
  color: black;
}

.new-link {
  text-decoration: none;
}


/* 投稿ボタン */
.listing-btn {
  width: 120px;
  background-color: lightskyblue;
  text-align: center;
  border-radius: 4%;
  bottom: 32px;
  right: 32px;
  position: fixed;
  padding: 15px;
  text-decoration: none;
}

.listing-btn-text {
  color: white;
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
}

.listing-btn-icon {
  width: 60%;
}

header.css

.header {
  display: flex;
  height: 15vh;
  width: 100vw;
  background-color: #FFEEFF;
}

.head-title {
  color: green;
  height: 15vh;
  width: 20vw;
  font-size: 50px;
  display: flex;
  align-items: center;
}

.lists {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  list-style: none;
  font-size: 25px;
  width: 50vw;
  height: 15vh;
}

.sign-up1 {
  text-decoration: none;
  margin-right: 3vw;
}

.login {
  text-decoration: none;
  margin-right: 3vw;
}

.logout {
  text-decoration: none;
  margin-right: 3vw;
}

.nickname {
  text-decoration: none;
  margin-right: 3vw;
}

/* ジャンル検索フォーム */
.search-form {
  height: 15vh;
  width: 30vw;
  display: flex;
  align-items: center;
}

.search-text {
  display: block;
  font-size: 17px;
  padding-top: 10px;
}

.search-select {
  height: 4vh;
  width: 15vw;
}

.search-btn {
  font-size: 15px;
  padding: 5px;
}

試したこと

自身で原因を探っていたところ、herokuでは動作する環境の仕様やアセットパイプラインの挙動が異なる
という情報があり、以下の記事を参考に、コードを実行してみました。
https://www.transnet.ne.jp/2016/02/28/rails%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8Dcolnr%E3%80%8C%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/

ターミナル上にて

% rake assets:precompile RAILS_ENV=production

config/environments/production.rb

config.assets.compile = true

上記コードを実行して、再度デプロイしましたが、
レイアウトの崩れは解消されず、解決に至りませんでした。

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