link not working HTML/CSS -

i know stupid question, i've been trying find causes error

i created site, however, links in content not working. know it's somewhere in css file can't find out what

this draft, removed parts in main html, css ease

    var firstreel=new reelslideshow({      	wrapperid: "myreel", //id of blank div on page house slideshow      	dimensions: [750, 550], //width/height of gallery in pixels. should reflect dimensions of largest image      	imagearray: [      		["images/a.jpg"], //["image_path", "optional_link", "optional_target"]      		["images/b.jpg"],      		["images/c.jpg"],      		["images/d.jpg"],      		["images/e.jpg"],       		["images/f.jpg"],      		["images/g.jpg"],      		["images/h.jpg"]		//<--no trailing comma after last image element!      	],      	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},      	orientation: "h", //valid values: "h" or "v"      	persist: true, //remember last viewed slide , recall within same session?      	slideduration: 300 //transition duration (milliseconds)      })

    body {      	background: url(images/cheeseclothbg.jpg)no-repeat center center fixed;      	font-family: avenir !important;      	font-size: 12pt;      	line-height: 20px;      	      	-webkit-background-size: cover;              -moz-background-size: cover;              -o-background-size: cover;              background-size: cover;            }      #header {      	background: url(images/header.jpg) no-repeat;      	min-height: 270px;      	overflow: hidden;      	background-size: 100%;      }      #content {      	float: left;      	width: 100%;      	margin-top: -101px;      	background: #fff;      	z-index:-1;      	position:relative;      }            	      #img {      	margin: 5px;          padding: 5px;          border: 1px solid #0000ff;          height: auto;          width: auto;          float: left;          text-align: center;      }      #img img{      	display: inline;          margin: 5px;          border: 1px solid #ffffff;      }            #desc{      	text-align: center;      	font-weight: normal;      	width: 120px;      	margin: 5px;      }                  #container {      	width: 826px;      	margin: 0 auto;      	box-shadow: 0 0 5px 1px #ccc;      }            #menu{      	margin:0;      	padding:0;      }      #menu ul{      	margin:0;      	padding:0;       	line-height:30px;      	margin-left:35px;      	margin-top: 139px;      }            #menu li{      	margin:0;      	padding:0;      	list-style:none;      	float:left;      	position:relative;      	background:#fff;      }            #menu ul li a{      	text-align:center;      	font-family:"comic sans ms", cursive;      	font-size:12px;      	text-decoration:none;      	height:30px;      	width:150px;      	display:block;      	color:#000;      	margin-left:10px;      	text-shadow:1px 1px 1px #999;      }            #menu ul li{      	text-align:center;      	font-family:"comic sans ms", cursive;      	font-size:12px;      	text-decoration:none;      	height:30px;      	width:150px;      	display:block;      	color:#000;      	      	text-shadow:1px 1px 1px #999;      }            #menu ul li ul li a{      	text-align:center;      	margin-left:0px;      	      	      }            #menu ul li ul{      	margin-top:-5px;      }            #menu ul li ul li{      	margin-top:-2px;      	margin-left:-35px;      	position:relative;      	z-index:3px;      }      #menu ul ul{      	position:absolute;      	visibility:hidden;      	top:32px;      	z-index:10px;      	      }            #menu ul li:hover ul{      	visibility:visible;      }            /*******************************/      #menu li:hover{      	text-decoration:underline;            }            #menu ul li:hover ul li a:hover{      	text-decoration:underline;      	color:#fa9a2a;      	      }            #menu a:hover{      	color:#fa9a2a;      }            #menu ul li:hover {      	color:#fa9a2a;      }                        .clearfloat{      	clear:both;      	margin:0;      	padding:0;      	      }            #content p {      	margin: 30px 30px;      }            #footer {      	background: url(images/footer.jpg);      	min-height: 146px;      	background-size: 100%;      	clear: both;      	      }      #fmenu ul {      	padding: 0;      	margin-top: 120px;      	padding-top: 19px;      }      #fmenu ul li {      	display: inline-block;      }      #fmenu ul li {      	font-size: 14px;      	font-weight: bold;      	padding: 1px 14px 0;      	margin-top: 0px;      	color: #000000;      }            #fmenu p {      	/**margin-top: 120px;      	margin-left: 480px;      	display: inline-block;      	width: 310px;      	font-size: 11px;      	color: #000;      	text-align: right;**/      	      	width:70%;          color:#ffffff;          font-size: 8pt;          padding-left:10px;          padding-top:10px;      	display:inline-flex;      	margin-top: 110px;      }            #fmenu img{      	width:36px;          height:36px;      }      #fmenu ul.social_icons, li.social {          margin-top:40px;          padding-left:5px;          padding-right:5px;          max-width:25%;          list-style: none;          float:right;          text-decoration:none;          display:inline-block;          position: relative;      }            #maintxt p{      	margin: 40px 100px;      }            #overview h2{      	font-family: open sans condensed, !important;      	text-shadow: 2px 2px 8px #9d9b9b;      	font-size: 26px;      	      }      #overview h1{      	font-family: impact, !important;      	font-size: 46px;      }      #overview h4{      	font-family: gabriola, !important;      	font-size: 26px;      	color: #e2705a;      	margin-top: -20px;      }      #overview h3{      	font-family: sacramento, !important;      	font-size: 36px;      		margin-top: -20px;      }            #overview h5{      	font-family: open sans condensed, !important;      	font-size: 21px;      	margin-top: -20px;      	      }            #reviews table th td{      	border: 1px solid black;      }            #reviews h5{      	font-family: open sans condensed, !important;      	font-size: 18px;      	text-align:center;      }            #reviews h2{      	font-family: open sans condensed, !important;      	text-shadow: 2px 2px 8px #9d9b9b;      	font-size: 26px;      }       #reviews h3{      	 font-family: sacramento, !important;      	font-size: 26px;      	font-weight:bold;       }            #usage h1{      	font-family: cookie, !important;      	font-size: 46px;      	float:left;      }      #usage img{      	width: 250px;      	height: 250px;      }            #about p{      	font-family: georgia, !important;      	font-size: 18px;      	font-style: italic;      	text-align: justify;      }            #about2 p{      	font-family: avenir, !important;      	font-size: 16px;      	width:600px;      }            #about2 ul{      	width:600px;      }            #about2 li{      	font-family: avenir, !important;      	font-size: 14px;      	width:600px;      	text-align: left;      }    **html**          <!doctype html>      <html>      <head>      <meta charset="utf-8" />      <title>our </title>      <link href="style2.css" rel="stylesheet" />                  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>      <script type="text/javascript" src="jquery.touchswipe.min.js"></script>            <style type="text/css">            #myreel{ /*sample css demo*/      border:15px solid black;      }            .paginate{      width: 330px;      margin-top:5px;      font:bold 14px arial;      text-align:center;      }

    <div id="container"> <!--wrapper-->      	<header id="header">          	<div id="menu" class="menu"> <!--navmenu-->              	<ul>                      <li><a href="test.php" > home </a></li>                      <li>our product      				<ul>       					<li><a href="productoverview.php" > product overview</a></li>      					<li><a href="usage.php" > cheesecloth usage</a></li>      					<li><a href="reviews.php" > product reviews </a></li>      				</ul>      				</li>      				<li> suggestions       				<ul>      					<li><a href="tips.php" > tips , ideas </a></li>      					<li><a href="recipe.php" > recipes </a></li>      					<li><a href="ideas.php" > send ideas </a></li>      				</ul>      				</li>      				<li><a href="about.php" > </a> </li>      				<li><a href="contact.php" > contact </a> </li>              	</ul>       			<br class="clearfloat" />              </div>      </header>            <section id="content">      		<a href="#" target="_blank">      				<img src="images/wantbtn.png" style="display:inline; margin: 50px auto; margin-top: 2em;"/> </a>            	      	            </section>            <footer id="footer">      	<div id="fmenu" class="fmenu">      		<p>©2015 copyright    |    rights reserved</p>      		<ul class="social_icons">      			<li class="social">      				<a href="http://www.facebook.com/" target="_blank">      					<img src="images/fb.png" /> </a></li>      			<li class="social">      				<a href="https://www.pinterest.com/" target="_blank">      					<img src="images/pin.png" /> </a></li>      			<li class="social">      				<a href="https://instagram.com/" target="_blank">      					<img src="images/insta.png" /> </a></li>      		</ul>      </footer>      	</div>            </div>

its z-index:-1 #content, remove it, don't see reason. content lie below header tag, disabling link. hope helps.