Oi, tudo bem?
Estou criando um website, porém eu estou com um problema no meu menu. O mesmo está totalmente para a esquerda, não consegui centralizar. Estarei mandando a imagem e o código em spoiler, pois é muito grande os códigos.
CÓDIGO HTML
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Goat Life</title>
<link rel="stylesheet" type="text/css" href="Life.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<section id='contenedor_general'>
<video src="Chuva.mp4" loop="true" autoplay="true"></video>
<div id="goat"></div>
</section>
<section id='body'>
<section id='scrolldown'>
<p id='titulo'>Scroll Down</p>
<p id='menorque'><</p>
</section>
<section id='seccion'>
<header>
<div class="menu"><ul>
<nav>
<ul>
<li><a href="#">Categoria</a></li>
<li><a href="#">Categoria</a></li>
</ul>
<img id="bode" src="goatt.png" alt="">
<ul>
<li><a href="#">Categoria</a></li>
<li><a href="#">Categoria</a></li>
</ul>
</div> </header>
</section>
</body>
</html>
CÓDIGO CSS
Código:
@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
*{
margin: 0;
padding: 0;
font-family: 'Julius Sans One', sans-serif;
}
section#contenedor_general{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
section#body{
width: 100%;
min-height: 300px;
overflow: hidden;
}
section#scrolldown{
margin: auto;
width: 200px;
height: 60px;
}
p#titulo{
text-align: center;
font-weight: lighter;
font-size: 1.5em;
color: white;
}
p#menorque{
-webkit-transform: rotate(270deg);
text-align: center;
color: white;
font-size: 1.3em;
}
section#seccion{
width: 100%;
height: 700px;
margin-top: 20px;
background-color: white;
}
div#goat{
width: 100%;
height: 100%;
background-image: url(goat.png);
background-repeat: no-repeat;
position: absolute;
background-position: center top;
top: 0;
opacity: 0.9;
left: 0;
z-index: 99;
}
header{
width: 100%;
height: 70px;
background-position: center;
background-color: gray;
z-index: 999;
}
nav{
display: table;
margin: auto;
height: 15px;
margin-top: 15px;
}
ul{
display: block;
float: left;
list-style: none;
}
ul li{
float: left;
margin: 10px;
padding: 2px;
}
ul a{
color: #F3F3F3;
text-decoration: none;
}
img#bode{
float: left;
display: block;
}
Evite copiar o que eu demorei para fazer, faça seu website na raça.
Por favor, evite ser denunciado cubando aqui no meu tópico. Poste apenas se você pode ajudar!
