help me plox

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="main.css">
    <meta charset="utf-8">
    <title>Contact Me</title>

</head>

<body>
    <header class='header'>
        <div class='container'>
            <img class="logo-kekw" src="icons/kekw.png" alt="kekw">
            <nav>
                <ul>
                    <li>
                        <a href='index.html'>Home</a>
                    </li>
                    <li>
                        <a href="#">Learning</a>
                    </li>
                    <li>
                        <a href="#box-title">Hobbies</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <div id="box">

        <div id="box-title">
            I am learning about:
        </div>
        <div id="content">box-models, box-sizing, margins, padding, @media, and more currently.</div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et...

CSS

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    font-size: 24px;
    width: 100%;
    height: 100px;
    background-color: rgb(18 39 45);
    position: fixed;
    text-align: center;
    line-height: 50px;
    top: 0;
    left: 0;
    border-bottom: 1px solid turquoise;
}

.logo-kekw:hover {
    border-radius: 50%;
}

.logo-kekw {
    border-radius: 50%;
    border: #62b862dc solid 2px;
    padding: 1.8px 1.8px;
    height: 75px;
    width: 75px;
    float: left;
    margin-top: 9px;
    margin-left: 42px;
}

.header nav {
    float: right;
    padding-right: 35px;
    line-height: 50px;
}

.header nav ul li {
    list-style: none;
    display: inline-block;
    margin-left: 25px;
}

.header nav ul li a:hover {
    transition-duration: .3s;
    color: white;
}

.header nav ul li a {
    text-decoration: none;
    color: #f67600;
    font-size: 40px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: crosshair;
}

.header.shadow {
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

body {
    height: 100%;
    background-color: #100e17;
    margin-top: 120px;
}

#box-title {
    letter-spacing: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-transform: uppercase;
    margin-bottom: 25px;
    margin-top: 15px
}

#box #content {
    padding: 10px;
    border: 2px solid black;
}

#hobbies {
    box-sizing: border-box;
    letter-spacing: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-transform: uppercase;
    margin-bottom: 25px;
    margin-top: 15px
}

#box {
    background-color: rgb(94 94 125 / 50%);
 ...