Content scrolling over fixed content: What am I doing wrong?

Question

Doing this for my friend for free while learning Dreamweaver.
My fixed elements refuse to stay on top of my scrolling elements. I have asked nicely.
I tried the z-index:100;
I could use a hint or 2.
I also can't get my page to center. Might thses troubles be related?
I'd appreciate it if you would have a look: http://h2o-test.businesscatalyst.com/Brenda_test.htm
No hair left to pull. I have tried the z-index to no avail.
Thanks
Oregoner

Answer 1

I had a look at the validation as Sudershan quite rightly suggested, but do not believe that they contribute to your problem.
Nancy's suggestion certainly does make a difference.
Have a look at the markup for the problem lines
<div class="container"><h1 class="h2o_title"><font style="font-size: 72px;" color="#08087f">H2O Visions Bonaire</font> </h1><br>
<h2 class="h2">Guided Snorkel &amp; Photo Tours</h2></div>
<!--div Style="position: fixed; top: 200px; left: 70px;"-->
</div>
<div class="h2o_navbar"></div>
and the corresponding style rules
h2 {
    font-family:Verdana, Geneva, sans-serif;
    font-size:36px;
    color: #08087f;
    text-shadow: 0px 0px 30px #FFFFFF;
    line-height: 1.1;
    position: fixed;
    top: 100px;
    left: 70px;
.h2o_title    {
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:bold;
    text-shadow: 2px 2px 20px #FFFFFF;
    position: fixed;
    top: 20px;
    left: 70px;
.h2o_navbar {
    width: 960px;
    height: 60px;
    background-image:url(images/Yellow_Navbar.jpg);
   position: fixed;
    top: 200px;
    left: 70px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius:10px;
I suggest that you remove the highlighted style rules and position the elements using widths, floats and/or margins