Technical Documentation Page - Build a Technical Documentation Page

Now i cant figure out how to get the nav bar to line up on the left i think it is and i thought it was from making the text-align: left; on the nav element in the css page

<!-- file: index.html -->
<!DOCTYPEhtml>
<html>
  <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
    <style>
    @media screen and (max-width: 350px) {
            body {
        font-size: 16px;
      }
    }
    </style>
  <main id="main-doc">
    <body>
    <section class="main-section" id="Brody">
      <header>
        Brody
      </header>
      <p>Youngest Child</p>
      <p>Capricorn</p>
      <p>Boy</p>
      <li>Born Janruary 12th 2023</li>
      <li>Born in Greenville Ohio</li>
    </section>
    <section class="main-section" id="Cooper">
      <header>
        Cooper
      </header>
      <p>Middle Child</p>
      <p>Leo</p>
      <p>Boy</p>
      <li>Born July 25th 2020</li>
      <li>Born in Greenville Ohio</li>
    </section>
    <section class="main-section" id="Miya">
      <header>
        Miya
      </header>
      <p>Oldest Child</p>
      <p>Gimini</p>
      <p>Girl</p>
      <li>Born June 1st 2018</li>
      <li>Born in Dayton Ohio</li>
    </section>
    <section class="main-section" id="Katlyn">
      <header>
        Katlyn
      </header>
      <p>Mother</p>
      <p>Pisces</p>
      <code>Born March 17th 1998, </code>
      <code>Mother: Kimberly Garrett, </code>
      <code>Father: John Garrett </code> 
    </section>
    <section class="main-section" id="Colton">
      <header>
        Colton
      </header>
      <p>Father</p>
      <p>Gemini</p>
      <code>Born June 6th 1996, </code>
      <code>Mother: Krista Adams, </code>
      <code>Father: Mike Fuller</code>
    </section>
    </body>
    <nav id="navbar">
      <header>Names of Family</header>
    <p>
      <a class="nav-link" href="#Colton">Colton</a>
    </p>
    <p>
      <a class="nav-link" href="#Brody">Brody</a>
    </p>
    <p>
      <a class="nav-link" href="#Cooper">Cooper</a>
    </p>
    <p>
      <a class="nav-link" href="#Miya">Miya</a>
    </p>
    <p>
      <a class="nav-link" href="#Katlyn">Katlyn</a>
    </p>
    </nav>
  </main>
</html>
/* file: styles.css */
body{
  margin:0;
  padding:0;
  box-sizing:border-box;
  display:flex;
  color: #4d4e53;
  font-family: 'Open Sans', Arial, sans-serif;
  flex-direction:row-reverse;
}
nav{
  min-width:303.52px;
  display:flex; flex-direction:column;
  width:20%;
  text-align: left;
  
  
}
nav header{
  padding-top:1.5rem;
  padding-bottom:1rem;
  border-right:2px solid grey;
}

header{
  font-size:1.8rem;
  color:black;
}
 .nav-link{
   text-align:left;
   padding:0.7rem 0.7rem 0.7rem 1.5rem;
  text-decoration:none;
  color: #4d4e53;
  border-bottom:2px solid grey;
  border-right:2px solid grey;
}
nav > a:first-child{
  border-top:2px solid pink;
}
main{
  width:80%;
  margin:1.5rem 1rem 2rem 1.5rem;
  padding-bottom:2rem;

}
p{
 padding-left:1.5rem;
}
code
{ display:block;
 background-color: #f7f7f7;
  padding:1.2rem 1rem 1.2rem ;
  font-family: monospace;
  margin-left:2rem;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Hi @fullercolton060696

Here is an article you may find helpful.

Happy coding