Header Programmierung Webseite

Hallo, wollte einen Header programmieren bei www.Domainagentur.de, aber irgendwas stimmt hier mit den DIVs nicht möchte das genau mittig auf der Webseite positionieren. Wollte das so machen wie auf dem Screen: http://domainagentur.de/test/Unbenannt.png Wer kann mir da bitte weiterhelfen? Muss das HeaderLogo und Headerbild auch in einen DIV? Wer kann mir da bitte helfen dies umzusetzen?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Domainagentur Markus Kein</title> <style> *{ margin:0; padding:0; } #headerbild { max-width:1014px; width:80%; justify-content:center; align-self:center; } #logo { max-width:260px; width:20%; } #header { width:100%; display:flex; flex-direction:column; } .line{ display:flex; justify-content:center; align-items: flex-end; } nav,ul{ display:flex; } ul,li{ list-style:none; padding: 5px; } ul li a{ list-style:none; font-size:12px; color:black; } </style> </head> <body> <div id="header"> <div class="line"> <nav> <ul> <li><a href="">HOME</a></li> <li><a href="">UNTERNEHMEN</a></li> <li><a href="">DIENSTLEISTUNGEN</a></li> <li><a href="">FRAGEN& ANTWORTEN</a></li> <li><a href="">IMPRESSUM</a></li> </ul> </nav> </div> <img id="headerbild" src="/siteimage/ipad-820272_960_720.jpg"> </div> </body> </html>