Primeiramente boa tarde pessoal, bom, estou desenvolvendo um site sobre sustentabilidade para um trabalho da faculdade, meu grupo me deixou com essa tarefa pois tenho algum conhecimento em Python e Java e acreditaram que seria fácil para eu desenvolver em html, porém HTML e CSS sem chance pra mim, mas vamos lá ... Peço que me ajudem a ver se há algum erro nesse código que digitei.
Bom, eu criei um " menu " para o site o mesmo é para ficar " grudado " (fixo) na parte superior da página, o menu são " botões " quando alguém clica por exemplo em " home " é direcionado para a página que linkei a esse botão, até ai beleza, tudo funciona os links funcionam , porém quando incluo algum parágrafo na página ele puxa a configuração do CSS até ai beleza, mas o meu menu que deveria estar fixado na parte superior da página " desce ", ou seja, ele sai da posição que deveria ficar, ele move-se aproximadamente " 1 dedo " para baixo, por favor alguém dê uma olhada se tem algum erro, ou se há algum jeito de incluir meus parágrafos sem dar esse problema, já tentei usar o <p class="paragrafo"> , <p id="paragrafo">., <p> , mas do mesmo jeito desconfigura o menu...
Segue o código dá página Home e do CSS. Obs: já tentei mudar o ' p ' de lugar também, ou incluir nome a ele, nada funciona, por favor ajudem estou desesperado :v
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>Trabalho de APS</title>
<link rel="stylesheet" type="text/css" href="CSS 1.css"/>
</head>
<body>
<div id="menu">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Cadastre-se.html">Cadastre-se</a></li>
<li><a href="Agua.html">Água</a></li>
<li><a href="Lixo.html">Lixo</a></li>
<li><a href="Palestras.html">Palestras</a></li>
<li><a href="Fale.html">Fale conosco</a></li>
</ul>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 1.6em;
max-width: 480px;
color:#000000
}
body {
padding:0px;
margin:0px;
background-color:#FFFFFF
}
a:link {
text-decoration: none;
color:#009;
}
a:visited {
text-decoration: none;
color:#90F;
}
a:active {
text-decoration: none;
color:#090;
}
#menu ul {
padding:0px;
margin:0px;
float: left;
width: 100%;
background-color:#333333;
list-style:none;
font:125% Tahoma;
}
#menu ul li { display: inline; }
#menu ul li a {
background-color:#333333;
color: #FFFFFF;
text-decoration: none;
border-bottom:3px solid #333333;
padding: 2px 10px;
float:left;
}
#menu ul li a:hover {
background-color:#333333;
color: #6D6D6D;
border-bottom:3px solid #FFFF00;
}