My site goes pixels down when I use margin-top - html

Question

I'm trying to add code to my site's body but the header just keeps going down whenever I put anything with margin-top, even having ended it.
Already tried to move the header to after the div logo and after the menu. It seems to work better when its after menu. When I had margin-top in #barra, it moves the whole header alongside with it. Already tried everything I remember. Plus, before I close the header, it seems to be alright, but after I close it, it gets all messed up. I suspect it has to do with the menu. Hope you can help me. Thanks.
Header structure
Fiddle
Code:
HTML
<header id="header" class="fluid ">
<div id="mail"></div>
<div id="logo"> </div>
<!-- Menu -->
<div id="menu">
</ul>
</div>
</header>
<!-- Corpo parte 1 -->
<div id="barra"></div>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
#header {
margin-top: 0px;
background-image: url(Imagens/Headercontact.jpg);
height: 21px;
}
#logo {
width: 220px;
height: 210px;
margin-left: 162px;
margin-top: 0px;
background-image: url(Imagens/logo2.png);
position: fixed;
}
#menu {
margin-left: 320px;
margin-top: 190px;
}
#menu li {
display: block;
float: left;
margin-left: 57px;
}
#menu a li {
text-decoration: none;
color: black;
font-size: 18px;
font-family: Georgia;
width: 65px;
height: 29px;
display: block;
text-align: center;
}
#barra {
background-image: url(Imagens/semi.jpg);
height: 3px;
margin-top: 15px;
}

Answer 1

Apologies in advance if I misunderstand the issue you're trying to solve, but have you tried:
header {
position: absolute;
top: 0;
left: 0;
}

Answer 2

Delete the float: left in your .fluid rule and set your "#menu" margin-top: 0px; and it jumps back up ... an update of your fiddle
Further more, your menu's ul element look like this
<ul>
<li>Home</li>
which is really wrong, as it should look like this
<ul>
<li>Home</li>
So I recommend to do some clean up work and get elements correct coded, as these issues can cause very unpredictable results.

Answer 3

The divs are not stacking correctly in your page because some floated elements are not being properly clearfixed, causing the divs to float in into each other (in this case, your header and some inner elements). To fix this, I removed the float: left property from your .fluid class and wrapped your floated header elements inside a .clearfix class so they remain in a row.
CSS
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
display: block;
}
#header {
margin-top: 0px;
background-image: url(https://i.imgur.com/1ijUhkZ.jpg);
height: 21px;
}
#mailtext {
margin-left: 450px;
float: left;
font-family: "Adobe Devanagari";
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
}
#teltext {
margin-left: 40px;
font-family: "Adobe Devanagari";
font-weight: bold;
font-size: 18px;
float:left;
color: #FFFFFF;
position:absolute
}
#logo {
width: 220px;
height: 210px;
margin-left: 162px;
margin-top: 2px;
background-image: url(https://i.imgur.com/6u97lQ7.png);
position: fixed;
}
#menu {
margin-left: 320px;
margin-top: 190px;
}
#menu li{
display:block;
float:left;
margin-left:57px;
}
#menu a li{
text-decoration:none;
color: black;
font-size: 18px;
font-family: Georgia;
width: 65px;
height: 29px;
display:block;
text-align:center;
}
#menu a li:hover{
background-image: url(https://i.imgur.com/IH2Zg9N.png);
width: 65px;
height: 29px;
display:block;
color: white;
}
#barra {
background-image: url(http://i.imgur.com/S7Qt9Mn.jpg);
margin-top: 190px;
height:30px;
}
HTML
<!-- Cabeçalho e logo -->
<header id="header" class="fluid">
<div class="clearfix">
<div id="mail"></div>
<span id="mailtext"> Email: hotelsolemar#grupofbarata.com</span>
<div id="tel"></div>
<span id="teltext">Tel: [phone]</span>
<div id="logo"> </div>
</div>
<!-- Menu -->
<div id="menu">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Serviços</li>
</a>
<a href="#">
<li>Galeria</li>
</a>
<a href="#">
<li>Notícias</li>
</a>
<a href="#">
<li>Sobre</li>
</a>
<a href="#">
<li>Contato</li>
</a>
</ul>
</div>
</header>
<!-- Corpo parte 1 -->
<div id="barra"></div>
Demo: https://jsfiddle.net/8bbfyds3/4/