Technical Documentation Page Glitch?

I’m not sure if my other posts were posted but I’m having trouble with the third project in the Responsive Web Design course. The program is saying my headers can’t be empty and my .nav-link elements text should match my sections’ text. I’ve tried different browsers (no extensions) and reformatting several times. I’ve had no trouble embedding Google Fonts fonts into other projects either, so it’s likely not that. Any help is appreciated!
My HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="./styles.css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="sidenav">
    <nav id="navbar">
      <header>Technical Documentation Page</header>
      <a class="nav-link" href="#Topic1">Topic1</a>
    <a class="nav-link" href="#Topic2">Topic2</a>
    <a class="nav-link" href="#Topic3">Topic3</a>
    <a class="nav-link" href="#Topic4">Topic4</a>
    <a class="nav-link" href="#Topic5">Topic5</a>
    </nav>
    </div>
    <main id="main-doc">
      <h1>Technical Documentation Page</h1>
      <section class="main-section" id="Topic1">
        <header>Topic1</header>
        <p>text</p>
        <p>text</p>
        <code>code</code>
        <ul>
          <li>list item</li>
        </ul>
      </section>
      <section class="main-section" id="Topic2">
        <header>Topic2</header>
        <p>text</p>
        <p>text</p>
        <code>code</code>
        <ul>
          <li>list item</li>
        </ul>
      </section>
      <section class="main-section" id="Topic3">
        <header>Topic3</header>
        <p>text</p>
        <p>text</p>
        <code>code</code>
        <ul>
          <li>list item</li>
        </ul>
      </section>
      <section class="main-section" id="Topic4">
        <header>Topic4</header>
        <p>text</p>
        <p>text</p>
        <code>code</code>
        <ul>
          <li>list item</li>
        </ul>
      </section>
      <section class="main-section" id="Topic5">
        <header>Topic5</header>
        <p>text</p>
        <p>text</p>
        <code>code</code>
        <ul>
          <li>list item</li>
        </ul>
      </section>
    </main>
  </body>
</html>

My CSS:

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #000033;
  color: #fff5e6;
  font-family: "Titillium Web",Tahoma, sans-serif;
}

#sidenav {
background-color: #2db998;
  margin: 0;
  padding: 10px 0;
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
}

#sidenav header {
  padding: 0 20px;
  font-size: 25px;
  text-align: center;
  font-weight: bold;
  
}

nav {
  margin: 0;
  padding: 0;
}

.nav-link {
  color: #fff5e6;
  text-decoration: none;
  margin: 5% 0;
  padding: 20px 100px;
  font-size: 20px;
  display: inline-block;
}

.nav-link:hover, .nav-link:active {
  background-color: #fff5e6;
  color: #2db998;
}

main {
  margin-top: 25px;
  margin-left: 275px;
  margin-right: 25px;
  margin-bottom: 25px;
}

@media screen and (max-width: 450px) {
  #sidenav {
    visibility: hidden;
  }
  main {
    margin-left: 25px;
  }
}

Welcome to the forum @august.dozorec

This is your first post to the forum.

Good skeleton for the project.

Your media query is interfering with the tests. The css properties are affecting the page visibility.

Happy coding

That worked! Thank you so much!

1 Like