Positionen HTML

[#AnymRolex*]

Hey Com,

Ich hab nen kleines Problem und hab generell keine Ahnung wie es richtig funktoniert.

Problem:

In meinem Header ist ein H1 Tag und eine Navigation.
Die Navigation ist in der Mitte mit text-align:center;
Der H1 Tag ist in ganz links bzw. left.

Nun möchte ich meinen H1 Tag etwas nach rechts verschieben doch wenn ich es mit margin-left:25px; mache verschiebt sich auch meine Navigation.
Wenn ich es mit Position:relative; mache klappts aber dann ist es nicht "gefixxt" bzw. dann wird die Navigation über den H1 Tag einfach eingeblendet. siehe Bild.

Normales Bild:

 Spoiler

Problem mit Position:relative; ungefixxt :

 Spoiler

Codes:
HTML:

 Spoiler

PHP Code:

<header>
<h1>Hello</h1>
<nav>
<ul class="navi">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Anmelden</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
</nav>
</ul>
</header> 


CSS:

 Spoiler

PHP Code:


header {
background:#1C1C1C;
width:auto;
height:50px;
}

header h1 {
float:left;
margin:0 auto;
padding:0;
font-family:helvetica;
color:tomato;
position:relative;
left:25%;
}



nav {
margin:0 auto;
padding:0;
text-align:center;
} 


[Döner-Chicken Grill]

Meinst du so ca?

 Spoiler

CSS (Habs mal bissel umgeschrieben)

 Spoiler

header {
background:#1C1C1C;
width:auto;
height:50px;
}

header h1 {
float:left;
margin:0 auto;
padding:0;
font-family:helvetica;
color:tomato;
position:absolute;
margin-left: 150px;
}



nav{

}  

nav ul{
text-align: center;
}

nav ul li{
list-style: none;
padding: 20px;
display: inline;
}

nav ul li a{
text-decoration: none;
color: white;
}

Wenn noch was ist, kannste mich gerne in Skype adden. Kann dir bissel helfen, hab grad eh nix zu tun

Gruß.