.Header h1 disappears with margin-top and margin-bottom

Question

I'm making a theme for a blog on Blogger. I want the title of the blog to be in the middle of the header image (which I've aded as a HTML1 gadget, 'cause I didn't want my image to lose quality). I've tried to do this with margins, but every time title of this blog seems to disappear under some transparent space or something. Here's HTML code of a blog. Sorry, I'm new to all this.

Here's the image showing what the problem is.

A question like this one probably has been already asked, but I would really appreciate some help here. Right now the code of .Header h1 looks like this:

.Header h1 {
    text-align: center;
    position: relative;
    z-index: 9999999999999!important;
    font-family: 'Homemade Apple', cursive;
    color: #92bfb1;
    text-shadow:
           3px 3px 0 #fff,
         -1px -1px 0 #fff,  
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
           1px 1px 0 #fff;
    font-size: 50px;
    margin-top: 0px;
    margin-bottom: -100px;
    display:block;
}