Я пытаюсь разместить свой раздел под заголовком, но он появляется прямо под навигацией. Кроме того, заголовок является только навигацией, а не всей областью просмотра страницы. Я пытаюсь выяснить, ошибся ли я в части кода 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{
from{width: 0;}
to{width: 44%;}
}
/* cursor animations */
@keyframes animated-cursor{
from{border-right-color: black;}
to{border-right-color: transparent;}
}
/* --- Project Styles --- */
.section {
clear: both;
padding: 0px;
margin: 0px;
} ```