Technical Documentation Page

Hello,
I know this is a mess but im trying to figure out how to get my nav div on the left-top side of the page.
idk if this post is even going to work


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta viewport="width=device-width, initial-scale=1.0"/>
    <title>Technical Document</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  <main id="main-doc">
    <section id="Header_1" class="main-section">
      <header>Header 1</header>
        <p id="h1p1">Header 1 Paragraph 1</p>
          <code>this is code</code>
        <p id="h1p2">Header 1 Paragragh 2</p>
        <ul id="h1-list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </section>
    <section id="Header_2" class="main-section">
      <header>Header 2</header>
        <p id="h2p1">Header 2 Paragragh 1</p>
          <code>this is code</code>
        <p id="h2p2">Header 2 Paragragh 2</p>
        <ul id="H2-list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </section>
    <section id="Header_3" class="main-section">
      <header>Header 3</header>
        <p id="h3p1">Header 3 Paragraph 1<p/>
          <code>this is code</code>
        <p id="h3p2">Header 3 Paragraph 2</p>
        <ul id="H3-list">
          <li>Item 1</li>
          <li>Item 2</li>
    </section>
    <section id="Header_4" class="main-section">
      <header>Header 4</header>
        <p id="h4p1">Header 4 paragraph 1</p>
          <code>this is code</code>
        <p id="h4p2">Header 4 Paragraph 2</p>
        <ul id="H4-list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </section>
    <section id="Header_5" class="main-section">
      <header>Header 5</header>
        <p id="h5p1">Header 5 Paragraph 1</p>
          <code>this is code</code>
        <p id="h5p2">Header 5 Paragraph 2</p>
        <ul id="H5-list">
          <li>Item 1</li>
          <li>Item 2</li>
    </section>  
<div id="list">    
  <ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
  </ul>
</div>
  </main>
<div id="nav-div">
  <nav id="navbar">
    <header id="nav-header">Nav Header</header>
      <ul id="nav-list">
        <li><a class="nav-link" href="#Header_1">Header 1</a></li>
        <li><a class="nav-link" href="#Header_2">Header 2</a></li>
        <li><a class="nav-link" href="#Header_3">Header 3</a></li>
        <li><a class="nav-link" href="#Header_4">Header 4</a></li>
        <li><a class="nav-link" href="#Header_5">Header 5</a></li>
      </ul>
  </nav>
</div>
  </body>
</html>




@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
#main-doc {
  margin-left: 25%;
  border: 5px solid;
}
body {
  background-color: #abd7eb;
  color: #1b1b32;
  font-family: sans-serif;
  margin: 10px;
  }
#nav-div {
  max-width: 20%;
  height: 100%;
  border: 5px solid;
  }

okay, idk how to post my code

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

You can share your post by clicking on the symbol i highlighted below
All you gotta do is copy your code and paste it …

I can never remember the details of each project, so please post the link to the FCC exercise/project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta viewport="width=device-width, initial-scale=1.0"/>
    <title>Technical Document</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  <main id="main-doc">
    <section id="Header_1" class="main-section">
      <header>Header 1</header>
        <p id="h1p1">Header 1 Paragraph 1</p>
          <code>this is code</code>
        <p id="h1p2">Header 1 Paragragh 2</p>
        <ul id="h1-list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </section>
    <section id="Header_2" class="main-section">
      <header>Header 2</header>
        <p id="h2p1">Header 2 Paragragh 1</p>
          <code>this is code</code>
        <p id="h2p2">Header 2 Paragragh 2</p>
        <ul id="H2-list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </section>
    <section id="Header_3" class="main-section">
      <header>Header 3</header>
        <p id="h3p1">Header 3 Paragraph 1<p/>
          <code>this is code</code>
        <p id="h3p2">Header 3 Paragraph 2</p>
        <ul id="H3-list">
          <li>Item 1</li>
          <li>Item 2</li>
    </section>
    <section id="Header_4" class="main-section">
      <header>Header 4</header>
        <p id="h4p1">Header 4 paragraph 1</p>
          <code>this is code</code>
        <p id="h4p2">Header 4 Paragraph 2</p>
        <ul id="H4-list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </section>
    <section id="Header_5" class="main-section">
      <header>Header 5</header>
        <p id="h5p1">Header 5 Paragraph 1</p>
          <code>this is code</code>
        <p id="h5p2">Header 5 Paragraph 2</p>
        <ul id="H5-list">
          <li>Item 1</li>
          <li>Item 2</li>
    </section>  
<div id="list">    
  <ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
  </ul>
</div>
  </main>
<div id="nav-div">
  <nav id="navbar">
    <header id="nav-header">Nav Header</header>
      <ul id="nav-list">
        <li><a class="nav-link" href="#Header_1">Header 1</a></li>
        <li><a class="nav-link" href="#Header_2">Header 2</a></li>
        <li><a class="nav-link" href="#Header_3">Header 3</a></li>
        <li><a class="nav-link" href="#Header_4">Header 4</a></li>
        <li><a class="nav-link" href="#Header_5">Header 5</a></li>
      </ul>
  </nav>
</div>
  </body>
</html>

type or paste code here

  * {
    scroll-behavior: smooth;
  }
}
#main-doc {
  margin-left: 25%;
  border: 5px solid;
}
body {
  background-color: #abd7eb;
  color: #1b1b32;
  font-family: sans-serif;
  margin: 10px;
  }
#nav-div {
  max-width: 20%;
  height: 100%;
  border: 5px solid;
  }

so your code passes the exercise right now as it is, but doesn’t look good as you mentioned because the navigation is at the bottom left of the page.

Depending on how much work you want to do, you can:

  • look into using a grid layout to restructure the body elements the way you want them
  • move the navigation element to the start of the body element (instead of it being at the bottom now). Hopefully this doesn’t cause any test to fail. And use either a flex layout or try setting the display to inline-block for the body and and maybe the navigation/main section to make them sit next to each other if that is what you want.

Id like to make it look nice because I want to learn how to do that. did I just set the HTML up all backwards? I just figured I could lay it out like that and style it and move it around in CSS easily.

yes you can use a layout maanager to reorder things (as mentioned, look up the grid layout )

okay I will thank you