cssの指示が効かない

いつもお世話になっております。
cssのことで質問です。
画像の通り、ulに対して
.intro-ul{
font-size: 2.0rem;
line-height: 40px;
margin-left: auto;
margin-right: auto;
width: 50em;
}
という記載をしたのですが、下3つの
margin-left: auto;
margin-right: auto;
width: 50em;
の指示のみ効きません。

検証を見てみると、この3つが薄字になっています。
そしてその上にuser agent stylesheet
という記載していない指示が表示されているのですが、
この指示が優先されてしまっているということですよね。
この指示をなくして、自分で記載したcssの指示を効かせるにはどうしたらいいでしょうか？

リセットcssなど、いろいろと調べましたがよくわかりません。
よろしくお願いいたします。

No.4 ベストアンサー 回答者： naokita 回答日時： 2021/01/08 19:25

.intro-ul ul{

font-size: 2.0rem;
line-height: 40px;
margin-left: auto;
margin-right: auto;
width: 50em;
}

にするか、
下記のように（継承されない部分を）分けるか、

.intro-ul{
font-size: 2.0rem;
line-height: 40px;
}
.intro-ul ul{
margin-left: auto;
margin-right: auto;
width: 50em;
}

そもそも、width: 50emってのはPC用なら良いけど、レスポンシブ（スマホ用）を無視した指定ですから、近代ではあまり利用しませんけどね・・・

No.3 回答者： t_fumiaki 回答日時： 2021/01/08 11:29

ulに対してやって無いでしょ？

やってるのはdivに対して。
だから、その区画全体は指示の通りに効いてる。

divの中のulに対してやりたいなら、ulタグ付けないと出来ない。

この手の問題を確認する場合は、divとulとかにborder表示をする。
そうすればborderの位置関係や重なり関係が見えて、一目瞭然になる。

No.2 回答者： fujillin 回答日時： 2021/01/08 10:44

こんにちは

＞画像の通り、ulに対して
＞　・・・・・
＞という記載をしたのですが、
ulに対する指定ではないですよね？
（divに対する指定になっている）
それなので、ulに対するデフォルト指定が生きていることになります。

現状のHTML限定でよければ、セレクタを
　.intro-ul ul
または、単に、
　ul
とすることで、上書きできるものと想像します。

No.1 回答者： くんこば 回答日時： 2021/01/08 10:20

cssが上書きされてるだけでは？

important？を指定するとか。