Build a Technical Documentation Page

Hi, can someone please tell me how i can make the borders of my anchor elements in the navigation element match the length of the text. When i set display : block; the borders takes 100% of the width instead of wrapping around the text. And when i set display :inline-block; it appears like this:


Here is the html code:

    <nav id="navbar">
    <header>Learn Cpp</header>
    <a class="nav-link" href="#introduction_to_cpp">Introduction to Cpp</a>
    <a class="nav-link" href="#keywords">Keywords</a>
    <a class="nav-link" href="#variables">Variables</a>
    <a class="nav-link" href="#data_types">Data Types</a>
    <a class="nav-link" href="#object">Object</a>
    <a class="nav-link" href="#introduction_to_functions">Introduction to Functions</a>      
</nav>

And here’s the CSS code:

* {
    box-sizing: border-box;
}
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }
}

body {
    font-size: 20px;
    background-color: #ffff;
    display: flex;
    flex-direction: column;
}
section{
    min-width: 900px
}

nav {
    width: 100%;
    text-align: left; /* Aligns the links to the left */
}

.nav-link {
    display: inline-block; /* Allow it to wrap around the text */
    padding: 2px 5px;
    margin: 2px 10px;
    text-decoration: none;
    color: indigo;
    border: 2px solid #ddd;
    width: auto; /* Ensure width fits content */
}


header {
    color: indigo;
    border-bottom: 2px solid indigo;
    white-space: nowrap; /* Prevents text wrapping */
    font-size: 30px;
}

nav header {
    font-size: 40px;
    font-weight: bold;
    color: grey;
}

Hello there!
Kindly include a link to this project.
Thanks.

I’ve edited your code 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 (').

1 Like

Here’s the link, sorry if it’s not properly edited i’m new to the forum: https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page