Navigation bedeckt das Bild ..

[manager17]

Hey Com,

Mein Problem ist , dass wenn ich z.B ein Header habe und links ist ein Bild mit Float:left , da ist noch eine Navigation enthalten doch die ist nicht genau in der Mitte wenn ich es mit Position:relative und left: -4%; oder mit margin-left:-20px; mache passt es aber dann bedeckt es das Bild hier sind die HTML + CSS Codes und 2 Bilder das erste ist das normale wo es nicht genau in der Mitte ist und das zweite wo es passt aber es bedeckt.

HTML:+

Spoiler: HTML

<header>
<img src="img/blank.png" width="102" height="97">
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
</header>

CSS:

Spoiler: CSS

header {
display:block;
width:100%;
height:60px;
margin:0px;
padding:0px;
background:#FFF;
overflow:hidden;
box-shadow:3px 3px 3px #AEAEAE;
justifiy-content:space-around;
}

header img {
margin-left:10px;
padding:0;
float:left;
}

header nav {
margin:0 auto;
padding:0;
background:#fff;
display:flex;
display:-webkit-flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
position:relative;
left:-4%;
}

header nav ul {
margin:0 auto;
padding:0;
margin-top:15px;
}

header nav a {
font-family:sans-serif;
text-decoration:none;
color:#2f2c2c;
padding:5px;
margin:5px;
}

header nav li {
list-style:none;
display:inline;
margin:0;
padding:0;
}

header nav a:hover {
color:black;
border-bottom:2px solid #A21717;
}

header nav a.active {
border-bottom:2px solid #A21717;
}

 

[djheke]

Bitte ersetzen.

header nav {
margin:0 ;
padding:0;
background:#ddd;
margin-left:110px;
}

header nav ul {
margin:0;
padding:0;
margin-top:15px;
text-align:center;
}