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

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

我是编程新手,最近刚开始使用 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 大小(有些东西覆盖了它)

提前致谢!

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

HTML:

<h1>Head title</h1>

CSS:

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

Live demo