navの背景色が変化しない

実現したいこと

navの背景色を白くしたい。

前提

webの勉強のためにサイトを作成しています。
navの背景色を変えようとしたところ、変わらず困っています。

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

デベロッパーツールなどにエラーは出ていません。

該当のソースコード

index.html（一部）
1<section class="hero relative">
2  <nav class="fixed top-[0.5rem] left-[0.5rem] h-[4rem] z-10 bg-white">
3    <div class="flex justify-between">
4      <img
5        class="fixed top-[0.5rem] left-[0.5rem] h-[4rem] w-auto"
6        src="./images/logo.png"
7        alt="logo"
8      />
9      <div>
10        <ul class="fixed flex top-[1rem] right-[0.5rem] z-10">
11          <a href="#"><li class="text-2xl me-[1.5rem]">Policy</li></a>
12          <a href="#"><li class="text-2xl me-[1.5rem]">Services</li></a>
13          <a href="#"><li class="text-2xl me-[1.5rem]">Contact</li></a>
14          <a href="#"><li class="text-2xl me-[1.5rem]">Reserve</li></a>
15        </ul>
16      </div>
17    </div>
18  </nav>
19  <div class="swiper-container z-0">
20    <div class="swiper-wrapper">
21      <div class="swiper-slide">
22        <div class="slide-img">
23          <img
24            class="w-[100vw] h-[100vh] object-cover"
25            src="./images/hero1.jpg"
26            alt="diving"
27          />
28        </div>
29      </div>
30      <div class="swiper-slide">
31        <div class="slide-img">
32          <img
33            class="w-[100vw] h-[100vh] object-cover"
34            src="./images/hero2.jpg"
35            alt="diving"
36          />
37        </div>
38      </div>
39      <div class="swiper-slide">
40        <div class="slide-img">
41          <img
42            class="w-[100vw] h-[100vh] object-cover"
43            src="./images/hero3.jpg"
44            alt="diving"
45          />
46        </div>
47      </div>
48      <div class="swiper-slide">
49        <div class="slide-img">
50          <img
51            class="w-[100vw] h-[100vh] object-cover"
52            src="./images/hero4.jpg"
53            alt="diving"
54          />
55        </div>
56      </div>
57    </div>
58  </div>
59</section>