$ciColor: #691487; html { font-family: sans-serif; } body { display: grid; grid-template-areas: "navbar navbar" "content content"; grid-template-columns: 20rem 1fr; margin: 0; } nav { grid-area: navbar; align-self: center; background-color: $ciColor; color: white; padding: 5px; display: grid; grid-template-areas: "title rest-nav"; grid-template-columns: 15em 1fr; .app-title { margin: 0; padding-left: .5em; grid-area: title; background-image: url("../img/klammer.svg"); background-repeat: no-repeat; background-size: contain; } .board-search-input { background-color: white; border-radius: .3em; border: 1px solid white; padding: .4em; } ul { grid-area: rest-nav; list-style-type: none; margin: 0; padding: 0; li { display: inline-block; margin-right: 1rem; } } } main { grid-area: content; }