How to align margin-top; with css - css

Question

I have a site that looks kind of like this:
https://dl.dropbox.com/u/94786808/Example1.png
You'll notice the title "Post Production" is correctly aligned horizontally, but not vertically. When I try to align it vertically using the "margin top" command in css, this happens: https://dl.dropbox.com/u/94786808/example2.png
You can see that the title is now in the correct place, but the "box" containing it has moved as well. Here is the css involved:
Container (to hold it in place)
.container {
margin-left: auto;
margin-right: auto;
background-color:#FFF;
width: 960px;
height: 609px;
}
Post Production (the gradient box)
.postproduction {
width: 960px;
height: 203px;
background-image:url(../image/departments/bg.png);
opacity: 0.5;
-o-transition:.2s;
-ms-transition:.2s;
-moz-transition:.2s;
-webkit-transition:.2s;
}
and finally, Titlepost (the physical text)
.TitlePost {
margin-top: 101px;
margin-left: 35px;
font-family: 'NeouBold';
font-size: 30px;
}
Any ideas as to why this is happening?

Answer 1

Your code would probably be better structured like this:
Html
<div class="container">
<div class="postproduction">
<p>Post Production</p>
</div>
</div>
Css
.container {
margin-left: auto;
margin-right: auto;
background-color:#FFF;
width: 960px;
height: 609px;
}
.postproduction {
width: 960px;
height: 203px;
background-image:url(../image/departments/bg.png);
opacity: 0.5;
-o-transition:.2s;
-ms-transition:.2s;
-moz-transition:.2s;
-webkit-transition:.2s;
}
.postproduction p{
padding-top: 101px;
padding-left: 35px;
font-family: 'NeouBold';
font-size: 30px;
}