Tipp ist schwierig. Zum einen wissen wir nicht was dir genau vorschwebt. Das Logo-Bild liegt uns nicht vor. Und einige Angaben deines CSS kollidieren mit den notwendigen Anweisungen für deine vermeintlichen Vorstellungen. Zu Beginn kannst du dein CSS mal komplett löschen und durch das folgende ersetzen:
Code
body {
margin: 0;
}
#testing {
background-color: tomato;
height: 100%;
}
#divlogo {
padding: 20px;
}
#div1 {
padding: 0px 50px;
}
#divNav {
color: teal;
border-style: solid;
}
img {
}
ul {
background-color: #D0D8D0;
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
li a {
display: block;
color: black;
padding: 10px 0px 10px 15px;
text-decoration: none;
}
li a.aktiv {
background-color: #500000;
color: white;
}
li a:hover:not(.aktiv) {
background-color: #777;
color: white;
}
/* CSS-Grid */
#testing {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"logo text"
"navi text"
;
}
#divlogo {
grid-area: logo;
}
#divNav {
grid-area: navi;
}
#div1 {
grid-area: text;
}Wenn die Anordnung grundsätzlich stimmt kannst du anfangen Größen, Abstände, Farben und so weiter anzupassen.
Das ist aber nur ein Versuch dir bei der Lösung deines Problems zu helfen. Korrektes HTML sieht noch etwas anders aus und beim CSS wären teilweise andere Einheiten außer px sinnvoller.