In the id container change:
display: block
to
display: inline-block
Here is the change I made:
#Container {
display: inline-block;
position: relative;
z-index: 2;
width: 980px;
height: 900px;
background: #FFF;
top: 5px;
-webkit-transition: top, opacity;
-webkit-transition-duration: 1.5s;
}
works here is the jsfiddle.
To clarify the height auto and the block inline.
If you want to set the height to 400px like you have, you will need to set the display: inline-block as I have showed you above.
If you want to make the div auto which will take the size of the content added to the div then it is possible to add height: auto;
#Cabeçalho {
display: block;
position: relative;
z-index: 2;
width: 980px;
height: auto;
background: #FFF;
}
This is because the height being set to 400px is pushing down anything that is in a block element to achieve its 400px.
The inline-block allows the data to overlap which pushes the text back up where you want it.
This is because of your overlapping effect.
With a block element when something does not fit, it is pushed to the next line.