Technical Documentation page

HTML-CSS
1

Hello,
I’m building my technical documentation page and i cant seem to figure out why it wont display my code properly. I’m intending my section to be a vertical sidebar just like on the documentation page but it just wont display properly. What am i doing wrong?

Here’s my HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technical Documentation</title>
</head>

<body>
    <nav id="navbar">
        <ul>
            <li><a class="nav-link" href="#cats">Cats</a></li>
            <li><a class="nav-link" href="#bats">Bats</a></li>
            <li><a class="nav-link" href="#rats">Rats</a></li>
            <li><a class="nav-link" href="#hats">Hats</a></li>
            <li><a class="nav-link" href="#gats">Gats</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <article>
            <section id="cats">
                <header>
                    <h1>Cats</h1>
                    <p>Nature's Lovable lil' killers</p>
                </header>
                <p>Blah Blah Blah filler text. I love my cat Pepper!</p>
                <a><img src="#"></a>
            </section>
            <section id="bats">
                <header>
                    <h1>Bats</h1>
                    <p>Rats with wings and ugly but lovable faces.</p>
                </header>
                <p>Blah Blah Blah more filler text.</p>
                <img src="#">
            </section>
            <section id="rats">
                <header>
                    <h1>Rats</h1>
                    <p>Bats without wings, who you can make do cute dances!</p>
                </header>
                <p>More filler text to be filled in later.</p>
                <img src="#">
            </section>
            <section id="hats">
                <header>
                    <h1>Hats</h1>
                    <p>Unique garments wearable on top of your head! Gotta love 'em.</p>
                </header>
                <p>The first dude to put one on his head must have been like "yooooo"</p>
                <img src="#">
            </section>
            <section id="gats">
                <header>
                    <h1>Gats</h1>
                    <p>Johhny Gat is a character in Saints Row 4.</p>
                </header>
                <p>Did you know that the term "Gat" comes from the Gatling Gun invented by Richard Gatling?</p>
                <img src="Themoreyouknow.jpg">
            </section>
        </article>
    </main>
</body>

</html>

Here’s my CSS

* {
    display:block;
}

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display:block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #555;
    color: white;
}
2

This is your first issue:

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.