Fui por outro caminho utilizando materialize, não sei exatamente se este é o motivo mas o link PALESTRANTE dá uma piscada.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Site de conferencia da Alura</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/materialize.css">
</head>
<body>
<header class="cabecalho">
<nav>
<ul class="indice-cabecalho">
<li class="botao sobre-header waves-effect waves-light btn btn"><a href="#">Sobre</a></li>
<li class="botao palestrante-header waves-effect waves-light btn"><a href="">Palestrantes</a></li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="js/index.js"></script>
<script src="js/jquery.js"></script>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
</body>
</html>