MY HTML
<h1 class="container">HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 class="container" id="student-info">Student Info</h2>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 class="container" id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 class="container" id="css-questions">CSS</h2>
</section>
</form>
</main>
MY CSS
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
.container{
font-family: Verdana, Arial, sans-serif;
}
h2{
border-bottom: 4px solid #dfdfe2