body { padding: 0; margin: 0; font-family: Verdana; background-color: white; display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; grid-template-areas: "nav nav" "main side" "footer footer"; grid-template-columns: 1fr auto; } header { margin: 0; paddin: 0; } h1, h2, h3 { margin: 0; padding: 0; display: inline; } nav { padding: 0px; margin: 0px; display: flex; background-color: #062463; justify-content: space-between; flex-wrap: wrap; grid-area: nav; } nav ul { background-color: #062463; color: white; margin: 0; padding: 0; list-style-type: none; display: flex; align-items: center; flex-wrap: wrap; } nav li { margin: 0; padding: 0; } nav a, nav a:visited { padding: 10px; text-decoration: none; color: white; display: block; font-weight: bold; text-align: center; line-height: 100%; } nav a:hover, nav a:focus { padding: 10px; text-decoration: none; background-color: white; color: #062463; display: block; font-weight: bold; } a, a:visited { color: #062463;; } a:hover { background-color: #062463; color: white; } #content { padding: 15px; font-family: monospace; font-size: 14pt; flex: 1; grid-area: main } #sidebar { grid-area: side; } #sidebar ul { list-style-type: none; } #sidebar a, a:visited { color: #062463; } #sidebar a:hover { background-color: #062463; color: white; } #content a, a:visited { color: #062463; } #content a:hover { background-color: #062463; color: white; } footer { width: 100%; display: block; color: white; background-color: #062463; font-weight: bold; grid-area: footer; } footer ul { background-color: #062463; margin: 0px; padding: 0px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } footer li { margin: 0; padding: 0; display: inline-block; line-height: 45px; color: white; font-weight: bold; //flex: 1 1 0; text-align: center; } footer a, a:visited { text-decoration: none; color: white; display: inline-block; } footer a:hover, ul#nav a:focus { text-decoration: none; color: #062463; background-color: white; display: inline-block; } #cats { background-color: #062463; } .letter_search_result { text-decoration: underline; font-weight: bold; } ol { counter-reset: item; } .indexlink { display: block; } .notexists { color: red !important; font-weight: bold; } body { padding: 0; margin: 0; font-family: Verdana; background-color: white; display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; grid-template-areas: "nav nav" "main side" "footer footer"; grid-template-columns: 1fr auto; } header { margin: 0; paddin: 0; } h1, h2, h3 { margin: 0; padding: 0; display: inline; } nav { padding: 0px; margin: 0px; display: flex; background-color: #062463; justify-content: space-between; flex-wrap: wrap; grid-area: nav; } nav ul { background-color: #062463; color: white; margin: 0; padding: 0; list-style-type: none; display: flex; align-items: center; flex-wrap: wrap; } nav li { margin: 0; padding: 0; } nav a, nav a:visited { padding: 10px; text-decoration: none; color: white; display: block; font-weight: bold; text-align: center; line-height: 100%; } nav a:hover, nav a:focus { padding: 10px; text-decoration: none; background-color: white; color: #062463; display: block; font-weight: bold; } a, a:visited { color: #062463;; } a:hover { background-color: #062463; color: white; } #content { padding: 15px; font-family: monospace; font-size: 14pt; flex: 1; grid-area: main } #sidebar { grid-area: side; } #sidebar ul { list-style-type: none; } #sidebar a, a:visited { color: #062463; } #sidebar a:hover { background-color: #062463; color: white; } #content a, a:visited { color: #062463; } #content a:hover { background-color: #062463; color: white; } footer { width: 100%; display: block; color: white; background-color: #062463; font-weight: bold; grid-area: footer; } footer ul { background-color: #062463; margin: 0px; padding: 0px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } footer li { margin: 0; padding: 0; display: inline-block; line-height: 45px; color: white; font-weight: bold; //flex: 1 1 0; text-align: center; } footer a, a:visited { text-decoration: none; color: white; display: inline-block; } footer a:hover, ul#nav a:focus { text-decoration: none; color: #062463; background-color: white; display: inline-block; } #cats { background-color: #062463; } .letter_search_result { text-decoration: underline; font-weight: bold; } ol { counter-reset: item; } .indexlink { display: block; } .notexists { color: red !important; font-weight: bold; } @media screen and (max-width: 768px) { #sidebar { display: none; } #footer li:nth-child(-n+2) { display: none; } #footer li:nth-of-type(3) { text-align: center; width: 100%; } }