Tech Documentation Project

I am so lost. My link wont center or respond to my css properly at all it seems. Nor will my h1 “Economy”. For some reason my div styling head doesn’t seem to respond properly to any css commands it just does seemingly random things no matter what I type in (I’m trying to get it to be the same length as the section container). Can someone please help what is wrong with my code.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="technical documentation page"/>
    <link rel="stylesheet" href="styles.css" />
    <title>Tech. Doc.</title>
  </head>
  <main id="main-doc">
    <body>
      <section>
      <div class="header-styling"></div>
        <header id="top-head">
          <h1>Economy</h1>
          </header>
          <nav id="navbar">
            <header id="nav-head">
        <a class="nav-link" href="#Taxes_Paid">Taxes Paid</a>
        <a class="nav-link" href="#Taxes_Owed">Taxes Owed</a>
        <a class="nav-link" href="#Loans">Loans</a>
        <a class="nav-link" href="#Debt">Debt</a>
        <a class="nav-link" href="#Expenses">Expenses</a>
        </header>
      </nav>
      <div id="content-div">
  <section class="main-section" id="Taxes_Paid">
    <header>Taxes Paid</header>
    <span class="tp-26">2006</span>
    <span class="tp-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Taxes_Owed">
    <header>Taxes Owed</header>
    <span class="t-26">2006</span>
    <span class="t-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Loans">
    <header>Loans</header>
    <span class="l">2006</span>
    <span class="l">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Debt">
    <header>Debt</header>
    <span class="d-26">2006</span>
    <span class="d-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Expenses">
    <header>Expenses</header>
    <span class="e-26">2006</span>
    <span class="e-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  </div>
  </section>
  </body>
  </main>
</html>

CSS

  * {
    scroll-behavior: smooth;
  }
}
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Lucida Console;
  margin: 0;
}
.header-styling{
  position:fixed;
  top:0;
  background: #1b1b32;
  max-width:40rem;
  height:102px;
  
}
#top-head{
  position:fixed;
  color:white;
  top:0;
}
.main-section {
  max-width: 40rem;
  margin: 0 auto;
  border: 2px solid #d0d0d5;
}
#nav-head {
  width:600px;
  padding-top:70px;
  position: fixed;
  top: 0;
  align-items:last baseline;
  text-align:center;
}
#content-div{
  margin-top:100px;
  
}
.l{
  text-align:center;
}

the fixed position seems to be causing some kind of problems because when I take that away the header styling comes back to being black but then doesn’t stay fixed to the top. So confused…

You can center #nav-head by making its parent #navbar a flexbox container and using justify-content: center

You can use text-align: center on the h1. However, its container will need to be full width (you can give it 100% width). Position fixed elements are the size of the content, not full width, even if the element used is a block-level element (i.e. header).


Edit: you also have an extra } in your CSS at the top, and you have incorrect element nesting in the HTML (body should be before main).

Thanks you, so none of that changed anything. The extra } is for an @media query so that should be there I think. Do you have any idea why the code is still not working?
CSS

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Lucida Console;
  margin: 0;
}
.header-styling{
  top:0;
  background: #1b1b32;
  max-width:40rem;
  height:102px;
  margin:0 auto;
  position:fixed;
}
#top-head{
  position:fixed;
  color:white;
  top:0;
  width:100%;
}
.main-section {
  max-width: 40rem;
  margin: 0 auto;
  border: 2px solid #d0d0d5;
}
#navbar{
  display:flex;
}
#nav-head {
  width:600px;
  padding-top:70px;
  position: fixed;
  top: 0;
  align-items:last baseline;
  justify-content:center;
}
#content-div{
  margin-top:100px;
  
}
.l{
  text-align:center;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="technical documentation page"/>
    <link rel="stylesheet" href="styles.css" />
    <title>Tech. Doc.</title>
  </head>
  <body>
  <main id="main-doc">
      <section>
      <div class="header-styling"></div>
        <header id="top-head">
          <h1>Economy</h1>
          </header>
          <nav id="navbar">
            <header id="nav-head">
        <a class="nav-link" href="#Taxes_Paid">Taxes Paid</a>
        <a class="nav-link" href="#Taxes_Owed">Taxes Owed</a>
        <a class="nav-link" href="#Loans">Loans</a>
        <a class="nav-link" href="#Debt">Debt</a>
        <a class="nav-link" href="#Expenses">Expenses</a>
        </header>
      </nav>
      <div id="content-div">
  <section class="main-section" id="Taxes_Paid">
    <header>Taxes Paid</header>
    <span class="tp-26">2006</span>
    <span class="tp-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Taxes_Owed">
    <header>Taxes Owed</header>
    <span class="t-26">2006</span>
    <span class="t-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Loans">
    <header>Loans</header>
    <span class="l">2006</span>
    <span class="l">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Debt">
    <header>Debt</header>
    <span class="d-26">2006</span>
    <span class="d-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Expenses">
    <header>Expenses</header>
    <span class="e-26">2006</span>
    <span class="e-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  </div>
  </section>
  </main>
</body>
</html>

You set #navbar to be a flex container, now you just need the space distribution. Use justify-content: center on it.

The header should be full width, but you are not doing any alignment on the h1

#top-head {
  width: 100%;
  /* CSS nesting for fun, use with care */
  h1 {
    text-align: center;
  }
}

#navbar {
  display: flex;
  justify-content: center;
}

Awesome thank you! Now im curious how to make the .header-styling fill in a black background around the navbar and the h1 as of now I don’t know how to define that space within the .header-styling. I also don’t understand how to make it so the main section stops before the navbar instead of taking the destination for the link you clicked on all the way to the top of the page. If that didn’t make sense just click on the first nav link and you will understand what I mean.

CSS

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Lucida Console;
  margin: 0;
}
.header-styling{
  top:0;
  background: #1b1b32;
}
#top-head{
  position:fixed;
  color:white;
  top:0;
  width:100%;
}
.main-section {
  max-width: 40rem;
  margin: 0 auto;
  border: 2px solid #d0d0d5;
}
#navbar{
  display:flex;
  justify-content:center;
  padding-left:200px;
}
h1{
  text-align:center;
}
#nav-head {
  width:600px;
  padding-top:70px;
  position: fixed;
  top: 0;
  align-items:last baseline;
  justify-content:center;
}
#content-div{
  margin-top:100px;
}
.l{
  text-align:center;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="technical documentation page"/>
    <link rel="stylesheet" href="styles.css" />
    <title>Tech. Doc.</title>
  </head>
  <body>
  <main id="main-doc">
      <section>
      <div class="header-styling"></div>
        <header id="top-head">
          <h1>Economy</h1>
          </header>
          <nav id="navbar">
            <header id="nav-head">
        <a class="nav-link" href="#Taxes_Paid">Taxes Paid</a>
        <a class="nav-link" href="#Taxes_Owed">Taxes Owed</a>
        <a class="nav-link" href="#Loans">Loans</a>
        <a class="nav-link" href="#Debt">Debt</a>
        <a class="nav-link" href="#Expenses">Expenses</a>
        </header>
      </nav>
      <div id="content-div">
  <section class="main-section" id="Taxes_Paid">
    <header>Taxes Paid</header>
    <span class="tp-26">2006</span>
    <span class="tp-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Taxes_Owed">
    <header>Taxes Owed</header>
    <span class="t-26">2006</span>
    <span class="t-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Loans">
    <header>Loans</header>
    <span class="l">2006</span>
    <span class="l">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Debt">
    <header>Debt</header>
    <span class="d-26">2006</span>
    <span class="d-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Expenses">
    <header>Expenses</header>
    <span class="e-26">2006</span>
    <span class="e-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  </div>
  </section>
  </main>
</body>
</html>

The element with the .header-styling class is empty.

You don’t need that element anyway, you can just add the background color style you have to #top-head instead.


I’m not sure if I understand your second question. Clicking the links doesn’t do anything because the page doesn’t scroll. I would need to give the sections a height or add more content.

Anyway, you might be referring to the scroll position which you can fix using scroll-padding

Set it on the html and make it the same value as the height of the fixed header.

html {
  scroll-padding-top: 86px;
}

Okay great so I got the color working on the #top-head and managed to center it. Now Im confused about

  1. why the #navbar is not scrolling but staying in the same place on the page as I scroll as I haven’t given it instructions to do so.
    2.why when I delete #navbar just to see what happens h1 also loses its centering and goes all the way to the left.
  2. Why the #top-head has a padding on the top when I haven’t given it instructions to do so.

CSS

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Lucida Console;
  margin: 0;
}
#top-head{
  background: #1b1b32;
  height:100px;
  color:white;
  top:0;
  margin:0 auto;
  max-width:40rem;
  width: 100%;
}
.main-section {
  max-width: 40rem;
  margin: 0 auto;
  border: 2px solid #d0d0d5;
}
#navbar{
  display:flex;
justify-content:center;
  padding-left:200px;
}
h1{
  text-align:center;
  padding-top:20px;
}
#nav-head {
  width:600px;
  padding-top:80px;
  position: fixed;
  top: 0;
  justify-content:center;
}
.l{
  text-align:center;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="technical documentation page"/>
    <link rel="stylesheet" href="styles.css" />
    <title>Tech. Doc.</title>
  </head>
  <body>
  <main id="main-doc">
      <section>
      <div class="header-styling"></div>
        <header id="top-head">
          <h1>Economy</h1>
          </header>
          <nav id="navbar">
            <header id="nav-head">
        <a class="nav-link" href="#Taxes_Paid">Taxes Paid</a>
        <a class="nav-link" href="#Taxes_Owed">Taxes Owed</a>
        <a class="nav-link" href="#Loans">Loans</a>
        <a class="nav-link" href="#Debt">Debt</a>
        <a class="nav-link" href="#Expenses">Expenses</a>
        </header>
      </nav>
      <div id="content-div">
  <section class="main-section" id="Taxes_Paid">
    <header>Taxes Paid</header>
    <span class="tp-26">2006</span>
    <span class="tp-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Taxes_Owed">
    <header>Taxes Owed</header>
    <span class="t-26">2006</span>
    <span class="t-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Loans">
    <header>Loans</header>
    <span class="l">2006</span>
    <span class="l">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Debt">
    <header>Debt</header>
    <span class="d-26">2006</span>
    <span class="d-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Expenses">
    <header>Expenses</header>
    <span class="e-26">2006</span>
    <span class="e-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  </div>
  </section>
  </main>
</body>
</html>
  1. It doesn’t, only #nav-head has position: fixed on it.

  2. Deleting the #navbar element, or its styles, does not affect the h1 position. So I don’t know why you are seeing that.

  3. #nav-head has padding-top: 80px and the h1 has its default margin (its default margin top is pushing things down).


If you have more questions, please create a Codepen with your code.

Okay but now how do I
1.align the #nav-head to center?
2.make it scroll instead of staying in the same place in the viewport?

CSS

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Lucida Console;
  margin: 0;
}
#top-head{
  background: #1b1b32;
  height:100px;
  color:white;
  top:0;
  margin:0 auto;
  max-width:40rem;
  width: 100%;
}
.main-section {
  max-width: 40rem;
  margin: 0 auto;
  border: 2px solid #d0d0d5;
}

h1{
  text-align:center;
  padding-top:20px;
  margin-top:0;
}
#nav-head {
  width:600px;
  padding-top:60px;
  position: fixed;
  top: 0;
  align-items:center;
}
.l{
  text-align:center;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="technical documentation page"/>
    <link rel="stylesheet" href="styles.css" />
    <title>Tech. Doc.</title>
  </head>
  <body>
  <main id="main-doc">
      <section>
      <div class="header-styling"></div>
        <header id="top-head">
          <h1>Economy</h1>
          </header>
          <nav id="navbar">
            <header id="nav-head">
        <a class="nav-link" href="#Taxes_Paid">Taxes Paid</a>
        <a class="nav-link" href="#Taxes_Owed">Taxes Owed</a>
        <a class="nav-link" href="#Loans">Loans</a>
        <a class="nav-link" href="#Debt">Debt</a>
        <a class="nav-link" href="#Expenses">Expenses</a>
        </header>
      </nav>
      <div id="content-div">
  <section class="main-section" id="Taxes_Paid">
    <header>Taxes Paid</header>
    <span class="tp-26">2006</span>
    <span class="tp-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Taxes_Owed">
    <header>Taxes Owed</header>
    <span class="t-26">2006</span>
    <span class="t-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Loans">
    <header>Loans</header>
    <span class="l">2006</span>
    <span class="l">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Debt">
    <header>Debt</header>
    <span class="d-26">2006</span>
    <span class="d-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Expenses">
    <header>Expenses</header>
    <span class="e-26">2006</span>
    <span class="e-27">2007</span>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  </div>
  </section>
  </main>
</body>
</html>

You can use flexbox or grid to center elements.

You are using position fixed, remove that if you do not want a fixed position.

I don’t know the layout you are trying to create.