user agent stylesheetが表示され、CSSに書いたdisplay blockが打ち消されます。

前提

現在Webサイトを作成中です。

display blockを実行させたいのですが、user agent stylesheetが表示されて打ち消されてしまいます。(下記のような感じで↓)
どうしたらいいでしょうか？

　　　　　　　　　　user agent stylesheet
div {
display: block;
}

下の動画を参考にしながらBootstrapを使って、複数画像を表示させるカルーセルを作っています。
1分49秒あたりでdisplay blockが出てくるのですが、自分で実装してみると打ち消されてしまい画像が横に並んで表示されず困ってます。
https://youtu.be/nS_Ht0lT-uQ

実現したいこと

display blockを効かせる。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>slide</title>
8    <link rel="stylesheet" href="css/styles.css">
9
10    <!-- Bootstrapを使って実装しています↓ -->
11    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
12        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
13</head>
14
15
16<body>
17    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
18        <div class="carousel-inner">
19            <div class="carousel-item active">
20                <div class="card">
21                    <img src="" class="card-img-top" alt="1">
22                    <div class="card-body">
23                        <h5 class="card-title">Card title</h5>
24                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
25                            the card's content.</p>
26                        <a href="#" class="btn btn-primary">Go somewhere</a>
27                    </div>
28                </div>
29            </div>
30            <div class="carousel-item">
31                <div class="card">
32                    <img src="" class="card-img-top" alt="2">
33                    <div class="card-body">
34                        <h5 class="card-title">Card title</h5>
35                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
36                            the card's content.</p>
37                        <a href="#" class="btn btn-primary">Go somewhere</a>
38                    </div>
39                </div>
40            </div>
41            <div class="carousel-item">
42                <div class="card">
43                    <img src="" class="card-img-top" alt="3">
44                    <div class="card-body">
45                        <h5 class="card-title">Card title</h5>
46                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
47                            the card's content.</p>
48                        <a href="#" class="btn btn-primary">Go somewhere</a>
49                    </div>
50                </div>
51            </div>
52            <div class="carousel-item">
53                <div class="card">
54                    <img src="" class="card-img-top" alt="4">
55                    <div class="card-body">
56                        <h5 class="card-title">Card title</h5>
57                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
58                            the card's content.</p>
59                        <a href="#" class="btn btn-primary">Go somewhere</a>
60                    </div>
61                </div>
62            </div>
63            <div class="carousel-item">
64                <div class="card">
65                    <img src="" class="card-img-top" alt="5">
66                    <div class="card-body">
67                        <h5 class="card-title">Card title</h5>
68                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
69                            the card's content.</p>
70                        <a href="#" class="btn btn-primary">Go somewhere</a>
71                    </div>
72                </div>
73            </div>
74        </div>
75        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
76            data-bs-slide="prev">
77            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
78            <span class="visually-hidden">Previous</span>
79        </button>
80        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
81            data-bs-slide="next">
82            <span class="carousel-control-next-icon" aria-hidden="true"></span>
83            <span class="visually-hidden">Next</span>
84        </button>
85    </div>
86
87</body>
88
89
90<script src="js/main.js"></script>
91<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
92    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
93    crossorigin="anonymous"></script>
94
95</html>

該当のソースコード

CSS
1@media screen and (min-width:576px) {
2  .carousel-inner {
3    display: flex;
4  }
5
6  .carousel-item {
7    display: block;
8    margin-right: 0;
9    flex: 0 0 calc(100%/3);
10  }
11}

試したこと

リセットCSSを使用。HTML5とChrome推奨のCSSを使いましたがダメでした。

maisumakun

2022/12/08 01:18

> display blockを実行させたいのですが、user agent stylesheetが表示されて打ち消されてしまいます。それは、単にuser agent stylesheetのほうが打ち消されているだけではありませんか？

tina0928

2022/12/08 01:30

なるほどデベロッパーツールを見ると自分がCSSに書いたdisplay blockに打ち消し線がついているのですが、それはuser agent stylesheetによって打ち消された訳ではなく、他に原因があるということですか？

maisumakun

2022/12/08 01:38

> display blockを効かせる。それはもとからのような気がするのですが、現在は何が適用されているのか確認しましたか？

tina0928

2022/12/08 02:02

user agent stylesheetでdisplay blockはdivタグに適用されています。私は.carousel-itemというクラスにdisplay blockを効かせたいのですが、それが打ち消されてしまうのは、div自体にdisplay blockが適用している事とは無関係なのでしょうか？

miyabi_pudding

2022/12/08 02:10

div要素はもともと（user agent）display: blockが適用されている要素なので、わざわざCSSで指定しても意味がありません。（デフォルトでは、display: noneを適用しておき、クラス付与によってdisplay: blockを効かせたいのならば、意味がある）そのようなこともあり、CSSの記述の方は適用されないのかと。