Problems with Z-index while browsing my page in mobile

I have created a portfolio page for myself.

https://alonoparag.github.io/index.html#home

My problem is that when I check the page using Google Developers tools or with my android (samsung galaxy s4) device, the navbar's items are always behind the content of #home.

I tried tweaking the z index of the navbar items versus the home content, with no avail. When Checking the elements in the developer's tools I saw that both the navbar elements and the div z-index have changed, but it didn't affected the way that the elements are stacked.

I would appreciate help with this.

Cheers

here's my code

.topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
   z-index: 10000;
}

div.content {
   align-content: center;
   width: 85%;
   margin: auto;
   padding: 16px;
   z-index: 1;
}

Solution

You have to give a position for z-index to work. So if you add position:relative; z-index:10; to your header, it should work fine.