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

Question

I am new to programming and had recently started with html & css. I had made basic website layout using css grid ( holy grail layout ) but there are few thing I cannot work out.

1) Shadow not showing up under navbar and cant get working sticky navbar / header because navbar overlaps header.

html code

<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>

Tried:

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

2) Cant change h1 size with .h1 font-size: 32px; font-weight: bold; (something overides it)

Thank you in advance!

Answer 1

3) If h1 is the name of an element, not a class, remove the dot at the beginning.

HTML:

<h1>Head title</h1>

CSS:

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

Live demo