styleの適用が、HTML内だとできるのに、CSSではできない

お世話になります。

前提情報

・WordPressバージョン：5.3
・WordPressテーマ：Hueman Pro
・表示確認環境：Pixel 3a
・表示確認ブラウザ：Chrome 78.0、Opera 54.3(左記いずれでも同表示でした)

ここまでにやったこと(わからないことの前提情報)

表データを表示する際、セル内に1行で収まりきらない文字列が含まれている場合、折り返さずにテーブルデータをスクロール表示してくれるようにしたく、以下のように(試しに、html内で完結する形で)divタグ内にStyleを記載したところ、うまく行きました。

html
1<div class ="data_area" style="overflow-x: scroll; white-space: nowrap;">
2	<table>
3		：
4		：
5	</table>
6</div>

###わからないこと
上記のうち、<div class ="data_area"> のStyle情報を、下記のようにstyle.cssに移したところ、それまでにできていた、文字列の非改行・テーブルのスクロール表示ができておらず、(横幅に収まるよう、)文字列が縦に長く表示されてしまいました。

html
1<div class ="data_area">
2	<table>
3		：
4		：
5	</table>
6</div>
7※当該箇所以内では、何もstyle設定してません。

css
1.data_area{
2	overflow-x: scroll;
3	white-space: nowrap;
4}
5※記載したcssファイルが、上記htmlのHeaderにてlink relされていることは確認できてます

###(わからないことに対して)試したこと
WordPressのテーマによるStyleが優先されて適用されているのかも、と考え、テーマのstyle.cssを確認したところ、該当するような記述はなく…。

また、!importantをつけてみたりしたのですが、変化はありませんでした。

●12/2(月)14:30追記
PC・Chromeのデベロッパーツール上では正しくstyle適用されているように見え、実画面(表示画面設定?をPCスクリーン型ではなく、スマホ画面型に変えてみて)でも、正しくスクロールされています。
で、同じページをスマホデバイスから見ると、表示がおかしくなります。

以上、
CSSにstyleを記述した場合でも想定の通りに表示させるには、何か方法等ありますでしょうか？
ご教示のほど、よろしくお願いいたします。

Takumiboo

2019/11/29 16:31

> CSSに移したところどこに移したのでしょうか。

wwwww

2019/11/30 18:45

すいません、失礼いたしました。m(_ _)m style.cssという、wordpress(のデフォルト状態)で一つにまとまったCSSに対して、です。その旨、質問に加筆しておきました。ありがとうございます。

CHERRY

2019/11/30 22:28 編集

デベロッパーツールで、該当HTML部分のCSS を確認するとどのように表示されていますか？

wwwww

2019/12/02 05:24

CHERRYさんありがとうございます。PC・Chromeで確認したところ、<div class="data_area">が適用されていました。(他のstyle要素についても、上書いていそうな要素はありませんでした。)

wwwww

2019/12/02 05:28

質問本体にも追記したのですが、PC・Chromeのデベロッパーツール上では正しくstyle適用されているように見え、実画面(表示画面設定?をPCスクリーン型ではなく、スマホ画面型に変えてみて)でも、正しいスクロール表示がされています。で、同じページをスマホデバイスから見ると、表示がおかしくなります。デバイス間差異?や、そもそもデベロッパーツールあまり使ったこと無かったので、一旦それらを当たってみたいと思います。ありがとうございます。