Technical Documentation Styling Issues

HTML-CSS
1

My <h1> keeps overflowing over the border I have for the navbar on the left. I’ve tried numerous times to fix it, but so far it doesn’t work. Anybody have any advice I can use to fix it?

My code so far:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML (Technical Documentation Example)</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <nav id="navbar">
        <header class="navbar-header">
          <h1>HTML Technical Documentation</h1>
          </header>
            <a href="#Introduction" class="nav-link">Introduction</a>
            <a href="#Tags" class="nav-link">Tags</a>
            <a href="#Forms" class="nav-link">Forms</a>
            <a href="#Buttons" class="nav-link">Buttons</a>
            <a href="#DOM" class="nav-link">DOM</a>
            <a href="#Reference" class="nav-link">Reference</a>
            </div>
            </nav>
            <main id="main-doc">
              <section class="main-section" id="Introduction">
                <header class="Introduction">Introduction</header>
                <p>
                  Placeholder text:
                  <br>
                  <ol>
                    <li><code>Placeholder Text</code></li>
                    <li><code>Placeholder Text</code></li>
                    </ol>
                    </p>
              </section>
              <section class="main-section" id="Tags">
                <header class="Tags">Tags</header>
                <p>
                  Placeholder text:
                  <br>
                  <ol>
                    <li><code>Placeholder Text</code></li>
                    <li><code>Placeholder Text</code></li>
                    </ol>
                    </p>
                </section>
                <section class="main-section" id="Forms">
                <header class="Forms">Forms</header>
                <p>
                  Placeholder text:
                  <br>
                  <ol>
                    <li><code>Placeholder Text</code></li>
                    <li><code>Placeholder Text</code></li>
                    </ol>
                    </p>
                </section>
                <section class="main-section" id="Buttons">
                <header class="Buttons">Buttons</header>
                <p>
                  Placeholder text:
                  <br>
                  <ol>
                    <li><code>Placeholder Text</code></li>
                    <li><code>Placeholder Text</code></li>
                    </ol>
                    </p>
                </section>
                <section class="main-section" id="DOM">
                <header class="DOM">DOM</header>
                <p>
                  Placeholder text:
                  <br>
                  <ol>
                    <li><code>Placeholder Text</code></li>
                    <li><code>Placeholder Text</code></li>
                    </ol>
                    </p>
                </section>
                <section class="main-section" id="Reference">
                <header class="Reference">Reference</header>
                <p>
                  Placeholder text:
                  <br>
                  <ol>
                    <li><code>Placeholder Text</code></li>
                    <li><code>Placeholder Text</code></li>
                    </ol>
                    </p>
                  </section>
                  </main>
                  </body>
                  </html>

CSS:

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

body {
  background-color: #f6f6f6;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  padding: 30px;
  width: 500px;
  height: 100vh;
  background-attachment: white;
  border-right: 1px solid black;
  overflow: hidden;
}

.nav-link {
  font-size: 20px;
  display: flex;
  flex-direction: column;
}

.nav-link {
  text-decoration: none;
  color: black;
  border-bottom: 1px solid grey;
  padding: 10px;
}

.nav-link:hover {
  background-color: #ccc;
  font-weight: 700;
  transition: background-color 0.1s ease-in-out;
}

.main-doc {
  margin-left: 400px;
  margin-right: 20px;
}

@media(max-width: 1200px) {
  #navbar {
    width: 150px;
  }
  header {
    font-size: 22px
  }
  #main-doc {
    margin-left: 250px;
  }
}

.main-section {
  margin: 50px 0px;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  background-color: white;
  border-radius: 10px;
  line-height: 3;
  padding: 10px;
}

p {
  line-height: 1.5rem;
  font-family: Arial, Helvitica, sans-serif;
}

h1 {
  text-align: justified;
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

For layout questions it is best to put your code in codepen so people can see it and play with it (and give feedback)

3

How would I put it in a codepen?

4

please read the official documentation.

5

I couldn’t figure out how to add on the test suite, so I just left it how it was. When I ran it through the normal tests here on the website, they all passed. Feedback is much appreciated.

6

Help is much appreciated.

7

I think using a font-size 22px for the h1 is forcing it to be too large for the space you have. Try using a relative sizing like 1rem for eg.

8

This fixed it. Thanks! May you please close this topic?

1 Like
9

it will be automatically closed in 6 months, but sure I will close it since you asked.

10