导航栏重叠 header，框阴影未显示，无法更改 h1 字体大小

Question

我是编程新手，最近刚开始使用 html 和 css。我使用 css 网格（圣杯布局）制作了基本的网站布局，但几乎没有什么我无法解决的。

1) 阴影未显示在导航栏下并且无法使用粘性导航栏/header 因为导航栏重叠 header.

html代码

<div class="wrapper">   
            <header class="main-head">The Header</header>
            <nav class="main-nav">
                <ul>
                    <li><a href="?page=nav1">Nav 1</a></li>
                    <li><a href="?page=nav2">Nav 2</a></li>
                    <li><a href="?page=nav3">Nav 3</a></li>
                </ul>
            </nav>

尝试过：

.main-nav { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 50px; }

2) 无法使用 .h1 font-size: 32px; font-weight: bold; 更改 h1 大小（有些东西覆盖了它）

提前致谢！

Answer 1

3) 如果 h1 是元素的名称，而不是 class，请删除开头的点。

HTML:

<h1>Head title</h1>

CSS:

h1 {
   font-size: 32px; 
   font-weight: bold;
}

Live demo

导航栏重叠 header，框阴影未显示，无法更改 h1 字体大小

Navbar overlaps header, box shadow not showing, cant change h1 font size

html

css

box-shadow