body { margin: 40px auto; max-width: 800px; line-height: 1.8; font-size: 18px; color: #454545; padding: 0 10px; background: #fbf9f7; display: grid; grid-template-columns: 150px auto; grid-template-areas: "logo title" "nav content" "nav foot"; /*gap: 10px;*/ height: 100%; } .logo { grid-area: logo; } .title { grid-area: title; } .nav { grid-area: nav; display: flex; flex-direction: column; } .main { grid-area: content; } .footer { grid-area: foot; } a { color: #07a; text-decoration:none; } a:visited { color: #07a; } sub { font-size: 12px; } .blogItem { padding-left: 5%; } .srcItem { display: flex; } .distro { display: flex; }