Oi eu queria saber porque quando coloco position fixed na minha tag reader do css, ele aprapalha do o meus estilos do reader que eu já tinha criado?
portifólio 2.zip (578,8,KB)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h1>Geovane <br>
<div class="espaço-titulo">
<div class="desenvolvedor"> desenvolvedor front-end</div>
</div>
</h1>
<nav class="menu-navegação">
<a class="menu-link" href="#">Sobre</a>
<a class="menu-link" href="#">Projetos</a>
<a class="menu-link" href="#">Habilidades</a>
<a class="menu-link" href="#">Contato</a>
</nav>
</header>
<hr class="hr-header">
<main>
<h2>
Sobre
</h2>
<div class="sobre">
<p class="descrição">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação na escola online Alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html, css e estou estudando java script e web responsivo. <br> <br> Procuro estágio na área
e será muito bom fazer parte da sua equipe. <br> Se quiser saber um pouco mais sobre meu trabalho ou bater um bom papo entre em contato logo abaixo!
</p>
<img class="foto-escritório" src="escritório.png" alt="escritório">
</div>
<h3 class="Projetos">
Projetos
</h3>
<p class="informações-de-projetos">
Ops! Por enquanto não tenho nenhum projeto, mais está em construção!
</p>
<h4>
Habilidades
</h4>
<div class="Skills">
<img id="html" class="fotos" src="html.png" alt="">
<img id="css" class="fotos" src="css.png" alt="">
<img id="git" class="fotos" src="git.png" alt="">
<img id="figma" class="fotos" src="figma.png" alt="">
</div>
<h5 class="Contatos">
Contato
</h5>
<form action="">
<div class="box-form">
<div class="form">
<div class="nome-sobrenome">
<label class="formulário" for="nome">Nome completo</label>
<div class="nome-sobrenome-input">
<input class="formulário" type="text" placeholder="Nome e sobrenome">
</div>
</div>
<div class="e-mail">
<label class="formulário" for="e-mail">E-mail</label>
<div class="e-mail-input">
<input class="formulário" type="email" id="e-mail" placeholder="Exem:email@gmail.com">
</div>
</div>
<div class="numero">
<label class="formulário" for="numero">Telefone</label>
<div class="numero-input">
<input class="formulário" type="tel" placeholder="( )">
</div>
</div>
<div class="assunto">
<label class="formulário" for="text">Assunto</label>
<div class="assunto-input">
<textarea class="formulário" name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
<div class="enviar-button">
<button class="formulário">enviar</button>
</div>
</div>
<div class="img-form">
<img class="foto" src="formulário.jpg" alt="">
</div>
</div>
</form>
</main>
<footer>
<hr class="hr-footer">
<div class="footer-social-midia">
<div class="social-midia">
<a class="linkedin" href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png" alt=""></a>
<a class="instagram" href="https://www.instagram.com/geovane8724/"><img src="instagram (2).png" alt=""></a>
<a class="facebook" href="https://m.facebook.com/geovane.santana.925059"><img src="facebook.png" alt=""></a>
</div>
</div>
</footer>
</body>
</html>
header {
posirion: fixed;
display: flex;
vertical-align: middle;
justify-content: space-between;
align-items: center;
margin-right: 4%;
}
hr {
width: 98%;
}
h1 {
font-size: 40px;
margin-left: 3%;
}
.sobre {
display: flex;
align-items: center;
}
h2 {
color: #7d7dde;
font-size: 57px;
margin-left: 6%;
}
.Projetos {
text-align: center;
color: #7d7dde;
font-size: 57px;
}
h4 {
text-align: center;
color: #7d7dde;
font-size: 57px;
}
.Skills {
text-align: center;
}
.Contatos {
text-align: center;
color: #7d7dde;
font-size: 57px;
}
.fotos {
margin-left: 110px;
}
#git {
width: 180px;
}
.descrição {
text-align: left;
font-size: 26px;
margin-left: 79px;
}
.desenvolvedor {
font-size: 28px;
}
.foto-escritório {
width: 991px;
}
.informações-de-projetos {
text-align: center;
font-size: 27px;
margin-left: 50px;
}
.formulário {
display: flex;
margin-left: 230px;
margin-top: 10px;
}
input {
border-radius: 50px;
border-color: #7d7dde;
}
textarea {
border-radius: 10px;
border-color: #7d7dde;
}
.box-form {
display: flex;
}
.formulário button {
margin-right: 50px;
}
.enviar-button {
display: flex;
justify-content: center;
margin-bottom: 5px;
}
.foto {
width: 497px;
margin-top: 10px;
margin-left: 200px;
}
.espaço-titulo {
margin-left: 40px;
}
.menu-link {
margin-right: 20px;
color: #BBBBBB;
text-decoration: none;
font-size: 210%;
}
.menu-link:hover {
color: black;
}
.social-midia img {
width: 30px;
margin-left: 1%;
}
.p-social-midia {
color: #BBBBBB;
margin-left: 5%;
margin-bottom: 4%;
}
.footer-social-midia {
margin-left: 90%;
}
.hr-social-midia {
margin-bottom: 6%;
margin-left: 7%;
width: 80px;
}
.p-div-copyright {
margin-top: -6%;
margin-left: 5%;
font-size: 39px;
}
.hr-copyright {
width: 19%;
margin-right: 83%;
margin-top: 1%;
}
@media screen and (max-width:480px) {
h1 {
margin-left: 50px;
font-size: 100px;
}
.espaço-titulo {
margin-left: 0px;
}
.menu-link {
background-image: url(menu-amburguer.png);
background-repeat: no-repeat;
background-size: cover;
}
}