How to get the fa-bars element in front of the background image Mobile Site?

Hello I am trying to get the hamburger menu in front of the background but cannot get it. I have tried setting the z-index to -1 for the background and other stuff but it does not work. When I view my website on my phone the menu does not appear. IDK how to fix it. When viewed on a computer it shows up but not mobile.
Heres the code.
CodePen: https://codepen.io/mfduar8766/pen/NavGXb

<!DOCTYPE html>
    <html>
    <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <style>
    html>body {
    margin-right: 40%;
    padding: 0px;
}

    .slides {
    background-image: 
   image("https://cdn.shutterstock.com/shutterstock/videos/12616586/thumb/1.jpg"), 
   image("https://ak8.picdn.net/shutterstock/videos/7797166/thumb/1.jpg"),
    image("https://ak2.picdn.net/shutterstock/videos/7415047/thumb/1.jpg");
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    z-index:-1;
  }

.fa-bars {
        position: fixed;
        text-align: center;
        padding: 2px;
        top: 20px;
        left: 85%;
        width: 40px;
        height: 40px;
        font-size: 2.5em;
        background-color: rgba(0, 0, 0, 0.5);
	    list-style-type: none;
        color: white;
        cursor: pointer;
    }    

@media screen and (max-device-width:738px) {
html {
	margin: 0;
	padding: 0;
      }

.slides {
	background-size:cover;
	height:150%;
	width:140%;
	margin: 0;
	padding:0;
        z-index: -99;
     }

body {
	background-size: cover;
	background-repeat:no-repeat;
	height: 100%;
	width: 100%;
     }

.fa-bars {
	position: fixed;
        text-align: center;
        padding: 2px;
        top: 20px;
        left: 80%;
        width: 40px;
        height: 40px;
        font-size: 2em;
        background-color: rgba(0, 0, 0, 0.5);
	    list-style-type: none;
        color: blue;
        z-index: 99;
     }
}
</style>
</head>
<header id="mainNav"> 
<i class="fa fa-bars"></i> 
<ul> <div id="hide"> 
    <i class="fa fa-times"></i> </div>
    <li class = "navigation_item"><a href="home.html">Home</a></li> 
    <li class = "navigation_item"><a href="AboutMe.html">About Me</a></li> 
    <li class = "navigation_item"><a href="Portfolio.html">Portfolio</a></li> 
    <li class = "navigation_item"><a href="Contact.html">Contact</a></li> 
</ul> 
</header> 
<body> 
    <img class="slides" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/c/6/c64216733c442e4c63636168de88dc9cb8003164.jpg'/> 
    <img class="slides" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/3/a/3af14ad5f3ce8201cb10d3fa1907fd6f31bb90ca.jpg'/> 
    <img class="slides" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/9/d/9d4c8614879a35a8ae8741aac5d5ee6671e02b37.jpg'/> 
    <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot">
        </span> 
    </div> 
</html>

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

I would also recommend adding a link to your codepen of the page, as this is easier to debug than looking at a wall of code.