display: flex; が利かない

前提・実現したいこと

〇ヘッダーに検索フォーム2つとマイページへのリンク(アイコン)を横並びに
〇背景色をオレンジ色に

<開発環境>
awsのcloud9でrubyonrailsを用いてwebアプリケーションを開発しています

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

〇headerボックスにdisplay: flex;
〇background-color: $orange;
が適用されないです

application.html.erb内のheaderボックス

 <div class="header">
         <a href="/"><h1>Weleve</h1></a>
          <div class="header_wrapper">
            <div class="search_form">
                <%= image_tag "events.png" %>
                <%= form_tag('/events/search', method: :get) do %>
                  <input placeholder="イベント名で検索※最大10文字" name="e_keyword" maxlength= 10 type="text" >
                  <input type="submit" class="btn-search"  value="検索する">
                <% end %>
              </div>
               <div class="search_form">
                  <%= image_tag "groups.png" %>
                  <%= form_tag('/groups/search', method: :get) do %>
                    <input placeholder="団体名で検索※最大10文字" name="g_keyword" maxlength= 10 type="text">
                    <input type="submit" class="btn-search"  value="検索する"　>
                  <% end %>
               </div>
               <div class="icon">
                 <%= link_to student_path(current_student) do %>
                  <%= image_tag "home.png" %>
                 <% end %>
               </div>
               <div class="icon">
                 <%= link_to root_path do %>
                  <%= image_tag "event.png" %>
                 <% end %>
               </div>
          </div>
        </div>

applicaiton.html.erbのheadタグ

  <head>
    <title>Weleve</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

style.scss内のheaderクラス

.header{
  height: 8vh;
  position: fixed;//スクロールしても固定される
  background-color: $orange !important;　//$orange: #f8b28;と定義済み
  color: $deepblue;
  line-height: 1.67;
  font-family: 'Lobster', sans-serif;
  // font-size: ;
  .header_wrapper{
    display: flex;
    justify-content: space-around; 
    .search_form{
          display: flex;
          justify-content: center;
    }
  }
}

style.scss内のbodyタグとhtmlタグ

 html{
   font-size: 62.5%;
}
@import url('https://fonts.googleapis.com/css?family=Lobster|Raleway:400,600&display=swap');
body{
  
  font-size:　1.6rem;
  line-height: 2;
  letter-spacing: 0.15em;
  font-family: "yuGothic", sans-serif;
  // box-sizing: border-box;　//ressで定義済み
  height: 100vh;
  width: 100vw;
  // background-color: $lightblue;
  // font-weight: bold;
}

試したこと

〇background-color: $orange !important;としてみる
〇ressの読み込みコードをコメントアウト
〇bodyタグ内のbackground-color: $lightblue;をコメントアウト

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

2時間以上悩んでしまっています...。どなたがご教授いただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のような形でいかがでしょうか?

試してみること

.headerに「display: flex;」が記述されていないので追記しました。
(flexは、横に並べたい要素の親要素に指定する必要があります。念のため)
変数$orangeでなく、数値を直接指定してみる
変数を指定する記述を読み込めていないのか、要素の高さが足りずに表示できていないかの切り分け

など

.header{
  min-height: 8vh; /* 最小値を指定するよう変更してみる */
  position: fixed;
  background-color: #fc0; /* 変数でなくしてみる */
  color: blue; /* 変数でなくしてみる */
  line-height: 1.67;
  font-family: 'Lobster', sans-serif;

  /* 以下、追記 */
  display: flex;
  top: 0;
  left: 0;
  right: 0;
}

投稿2020/03/08 10:44

new1ro

総合スコア4528

mikan0777

2020/03/09 06:41

ご回答いただきありがとうございます。上記のようにソースコードを変更してみたのですが改善されませんでした...。Googlechromeの検証ツールで調べてみたところ、style.scssに追記したheaderクラスの　内容が反映されていないようでした。もし何かほかに試した方が良いことがございましたら教えて頂けると嬉しいです。

new1ro

2020/03/09 10:05

> Googlechromeの検証ツールで調べてみたところ、style.scssに追記したheaderクラスの内容が反映されていないようでした。上記に対して試したほうがいいことだと、例えば以下が考えられます。 [1] コンパイルの問題・「style.scss」から書き出したファイル (style.cssでしょうか?) 内を文字列検索し、　追加した記述があるか探す・コンパイル時にエラーメッセージが出ていないか確認 [2] CSSの問題 (上書きされてしまっていないか) ・一時的に、記述すべてに「!important」をつけてみる・CSSセレクタの詳細度を上げてみる・Google Chromeの検証ツールの「Styles」について下の方までスクロールして、追加した記述が上書きされていないか見てみる (本当にstyle.scssに追記した内容が反映されていないのか? という視点) [3] そのほか・CSSに全角スペースが紛れ込んでいないか...など・style.scssのバックアップファイルなど別のファイルを編集してしまっていないか...など

行動規範の内容に同意します