Hey! Ich bin grad bisschen am verzweifeln..
Entweder ich denke falsch ode vergesse was oder bin doof :-).
Daher das ich drauf hingewiesen wurde nur kleinen teil vom html und CSS zu posten. Habe ich nur den Code der mit dem Kopfbereich zu tun hat posten.
Folgendes Problem:
Ich will meinen Kopfbereich neu machen ein bisschen schöner.
Vorher war es einfach nur eine Fläche mit Farbe. Jetzt mit Drei Bereichen.
Was wo ist seht ihr in der Skizze Die ich extra gemacht hab.
1. Die unteren beide Bereiche ordnen sich bei einem Handy untereinander das aber nicht sein soll. Sie sollen brav nebeneinander bleiben.
2. Die Ränder von beiden unteren Bereichen sind oben nicht bis an Ende. Sie hören kurz vorm Ende auf. Das soll nicht sein. Sie sollen bis zum Rand sein.
3. Die Überschrift soll mittig von seinem Bereich sein.
Ich bedankte mich für jede Hilfe im voraus 
HTML Code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<header>
<div id="headerbox">
<div id="headerbox-top">
<h1>Überschrift</h1>
</div>
<div id="headerbox-bottom">
<div id="headerbox-left">
<p>Thema Titel</p>
</div>
<div id="headerbox-right">
<img src="menu.png">
</div>
</div>
</div>
</header>
</body>
</html>CSS Code:
body{
font-size:100%;
margin:0px;
padding:0px;
}
/* Header Begin */
#headerbox{
display:block;
height:auto;
background-color:#2D3236;
text-align:center;
}
#headerbox-top{
font-size:150%;
font-weight:900;
color:white;
height:auto;
border-bottom:1px solid #1C1E21;
}
#headerbox-bottom{
display:box;
height:59px;
width:100%;
border-bottom:1px solid #383B3F;
}
#headerbox-left{
width:70%;
height:58px;
color:white;
display:inline-block;
border-right:1px solid #1C1E21;
}
#headerbox-right{
width:24.5%;
height:57px;
color:white;
display:inline-block;
}
#headerbox-right img {
width:100%;
height:100%;
}
/* Header End */
