节未显示在标题下方

Question

我正在尝试将我的部分放在标题下方，但它显示在导航栏的正下方。同样，页眉看起来只是导航，而不是页面的整个视口。我试图找出是我在代码的CSS部分上出错还是html结构错误。这是我到目前为止的内容：

<body>

<header class="header-content">
    <nav>
        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper active-nav-link">
                    <a href="index.html">Home</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="mailto:wrvn.co@gmail.com">Email</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="resume.html">Resume</a>
                </div>
            </div>

            <div class="right-side">
                <div class="name">
                    <a href="index.html">brand</a>
                </div>
            </div>
            </div>
            </nav>
    <div class="hero-text-box">
        <h2>Hello,<br>
            I'm a web designer and developer based in Florida. My main focus is to 
            build minimalistic web sites that you can surf through as quickly and 
            efficient as posible.
        </h2>
        <h2 class="typewriter">Take a look at my work!</h2>
    </div>
</header>

<section class="project-display">
    <h1>Projects</h1>

</section>

    margin: 0;
    padding: 0;
    box-sizing: border-box;

body, html 
    margin: 0;


.header-content
    clear: both;
    top: 0;
    width: 100%;
    margin: 0;
    height: 100%;
    left: 0px;
    margin-left: 0;
    margin-bottom: 20px;




/* --- Nav Style --- */
.nav-wrapper 
    display: flex;
    justify-content: space-between;
    padding: 40px;
    color: transparent;


/* left side */
.left-side 
    display: flex;


.nav-wrapper > .left-side > div 
    margin-right: 20px;
    font-size: 0.9em;
    text-transform: uppercase;

.nav-link-wrapper 
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;


.nav-link-wrapper a 
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;

.nav-link-wrapper:hover 
    border-bottom: 1px solid black;

.nav-link-wrapper a:hover 
    color: black;


.active-nav-link 
    border-bottom: 1px solid black;

.active-nav-link a 
    color: black !important;


/* right side */
.nav-wrapper > .right-side > div 
    margin-right: 20px;
    font-size: 100%;
    text-transform: uppercase;

.name a 
    color: black;
    text-decoration: none;
    transition: color 0.5s;


.hero-text-box 
    position: absolute;
    width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

h2, .typewriter 
    margin-bottom: 0;
    margin-top: 0;


.hero-text-box h2, .typewriter 
    font-size: 30px;
    word-spacing: 2px;
    text-align: left;
    letter-spacing: 1px;
    color: rgb(83, 83, 83);


.typewriter 
    width: 44%;
    border-right: solid 2px black;
    white-space: nowrap;
    overflow: hidden;    
    color: black;

/* Animation */
.typewriter 
    animation: animated-text 4s steps(29,end) 1s 1 normal both,
               animated-cursor 600ms steps(29,end) infinite;


  /* text animation */

  @keyframes animated-text
    fromwidth: 0;
    towidth: 44%;


  /* cursor animations */

  @keyframes animated-cursor
    fromborder-right-color: black;
    toborder-right-color: transparent;



/* --- Project Styles --- */
.section 
    clear: both;
    padding: 0px;
    margin: 0px;
 ```