[FRAGE] Div wird nicht wie gewollt dargestellt

[Skaduro]

Hallo habe Folgendes Problem, die Div Hauptmenueclass ist nicht inner halb meines header div's, trotzdem ich die Div relative gesetzt habe.

<div id='header'>
      <h1>Titel</h1>
    
<div class="Hauptmenueclass"><ul id="menu-hauptmenue" class="menu"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="">Startseite</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="">Beispiel-Seite</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://google.de">google</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item menu-item-16"><a href="">blabla</a></li>
</ul></div>  
</div>

css:

body        {margin: 0px; padding: 0px; color: #333; background: #e5e5e5; }
#wrapper    {width: 850px; margin: auto; text-align: left; background: #fff;}
#header     {height: auto; padding: 20px; }
#main       {width: 520px; padding: 20px; float: left;}
#sidebar    {width: 270px; padding: 10px; padding-top: 20px; float: left;}
#footer     {clear: both; height: 100px; padding: 20px; }
.Hauptmenueclass {
     margin-left:0px; ;
     margin-right:auto;
     border-left-width:0px; ;
     padding-left:0px; ;
     text-align:left;
     position: relative;
}

.menu {
     margin-left:0px; ;
     margin-right:auto;
     border-left-width:0px; ;
     padding-left:0px; ;
     text-align:left;

}

.Hauptmenueclass li {
    float: left;
    position: relative;

}


.Hauptmenueclass a {
  color: #eee;
  text-decoration: none;
  float: left;
  line-height: 40px; padding: 0 8px; margin: 0px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.Hauptmenueclass a:first-child {
margin-left: none;
}

.Hauptmenueclass a:hover, .Hauptmenueclass .current-menu-item a, .Hauptmenueclass .current-menu-parent a {
  background: #8b9b87
  url(img/hover.png) repeat-x;
  color: #2B3A27;
  font-weight: normal;
}

.Hauptmenueclass li:hover {
    background: #8b9b87
    url(img/hover.png) repeat-x;
}

.Hauptmenueclass .sub-menu {
  padding: 0 px 0; margin: 0;
  list-style: none;
  position: absolute; top: -999px; opacity: 0;
  background: #a1ad9e;
}

.sub-menu li {
    float: none;
    display: block;
    position: static;
    padding-bottom: 1px;
}

.Hauptmenueclass li:hover .sub-menu {
    background: #8b9b87;
    top: 40px; opacity: 1;
    transition: opacity .4s ease-in-out;
}

.Hauptmenueclass .sub-menu a {
    padding: 0px 10px; margin: 0; display: block;
    float: none;
    line-height: 1.5;
    background: none; color: #2b3a27;
    white-space: nowrap;
}

.Hauptmenueclass li ul a:hover {
    color: #eee;
    background: #425c3b;
}

Ist gelöst, für Head fehlte ein : display: inline-block;