Как оптимизировать эту страницу документации, которую я сделал? ⇐ CSS

[Anonymous]

В настоящее время я выполняю курсовой проект в freeCodeCamp. Задача состоит в том, чтобы создать страницу документации и следовать этим наборам инструкций, которые я уже сделал: скриншот инструкций
Просто нужна помощь со следующими проблемами:

• Как увеличить высоту боковой панели навигации без наложения на заголовок заголовка и верхнюю панель навигации.
• Я не могу центрировать заголовок заголовка «Документация» по вертикали по центру контейнера.
• Когда щелкают ссылку на панели навигации, она должна перейти в тот раздел, который должен быть, но проблема то есть заголовок раздела обрезан, возможно, из-за верхней панели навигации, как это исправить?
• и общее предложение по коду, например. отзывчивость на диф. размеры экрана, структуры кода и т. д. (не волнуйтесь, я принимаю критику за улучшения )

Codepen
HTML:

Код: Выделить всё

  


hecker.


Search





Documentation
A documentation page made by rain



Navigation
[list]
[*]
[url=#Introduction]
Introduction
[/url]

[*]
[url=#Code]
Code
[/url]

[*]
[url=#Installation]
Installation
[/url]

[*]
[url=#Integration]
Integration
[/url]

[*]
[url=#References]
References
[/url]

[/list]





Introduction
[url=reference.html]here[/url].






CSS:
[code]@media (prefers-reduced-motion: no-preference){
* {
scroll-behavior: smooth;
}
}
html, body {
margin: 0;
box-sizing: border-box;
line-height: 1.5;
}
#nav-top {
background-color: black;
position: fixed;
width: 100%;
height: 75px;
display: flex;
align-items: center;
justify-content: space-between;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
#logo {
padding: 30px;
color: lightgreen;
font-size: 50px;
}
#search-container {
padding: 30px;
}
input[type="search"] {
border-radius: 15px;
border: 2px solid white;
background-color: black;
padding: 6px;
font-size: 15px;
color: white;
}
input[type="search"]::placeholder {
color: white;
}
button {
border-radius: 15px;
padding: 6px;
background-color: black;
border: 2px solid white;
color: lightgreen;
font-size: 15px;
}
.heading {
padding-top: 100px;
text-align: center;
vertical-align: middle;
font-size: 1.4rem;
background-color: lightgreen;
height: 20%;
}
.heading p {
margin-top: -20px;
}
#navbar {
position: absolute;
left: 0;
border-right: 2px solid gray;
width: 300px;
height: 100%;
padding: 25px;
box-sizing: border-box;
background-color: black;
}
#navbar header {
font-size: 32px;
font-weight: bold;
color: white;
}
#navbar .nav-link {
font-size: 20px;
font-weight: bold;
text-decoration: none;
color: lightgreen;
}
#navbar .nav-link:hover {
color: white;
}
#main-doc {
position: absolute;
margin-left: 300px;
padding: 20px;
}
#main-doc header {
font-size: 32px;
font-weight: bold;
border-bottom: 2px solid gray;
margin-top: 30px;
}
#main-doc p, #main-doc code, #main-doc ol li, #main-doc h1{
font-size: 20px;
padding: 0 10px;
}
#main-doc code {
display: block;
text-align: left;
background-color: black;
color: lightgreen;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
#main-doc h1 {
font-size: 27px;
}
#main-doc #references a {
color: lightgreen;
text-decoration: none;
}
#main-doc #references a:hover {
color: black;
}

Ожидаемый результат:

• Исправлена ​​высота боковой панели навигации.
• заголовок заголовка выровнен по вертикали
• раздел не обрезается
• лучшие предложения по коду

Подробнее здесь: https://stackoverflow.com/questions/786 ... age-i-made