Header Elemente nebeneinander

Moin moin, Ich bin ganz neu dabei und versuche mich gerade an einer Testwebseite. Ich möchte den Header wie folgt aufbauen: Ganz oben die Überschrift mittig, da drunter 2 Links nebeneinander und ganz rechts ein Bild mit einem Logo. Leider wird man das Logo immer unter den Links angezeigt.

Der hier verwendete Code

<html> <head> <style> *{ margin:0; padding:0; } body{ display:flex; flex-direction:column; min-height:100vh; } header{ display:flex; flex-direction:column; } .header_row{ display:flex; } header img{ height:30px; } header .logo{ background:yellow; padding:10px; } header .nav { background: lightblue; height: 100px; display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; flex-direction: row; } main { flex:1; background: red; color: white; display: flex; font-size: 150px; text-align: center; align-items: center; justify-content: space-around; } footer{ height:60px; background:black; color:white; font-size:50px; text-align:center; } </style> </head> <body> <header> <div class="header_row logo"> <img src="https://www.html-forum.de/data/assets/logo/htmlforumlogo3.png"> </div> <div class="header_row nav"> <div class="left"> <button>Button</button> <button>Button</button> <button>Button</button> <button>Button</button> </div> <div class="right"> <a href="">Kontakt</a> </div> </div> </header> <main> MAIN </main> <footer> FOOTER </footer> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!