Tell us what’s happening:
Describe your issue in detail here.
I know this issue has been posted here several times but I have tried all of the solutions and none of them have solved my 15/16 problem. I have used both chrome and brave browser and I have changed the view into full page but still nothing works.
Your code so far
<main id="main-doc">
<header>Technical Document</header>
<section class="main-section"
id="Introduction">
<header>Introduction</header>
<p> Welcome to my technical documentation page where I report all things technical and documented.</p>
</section>
<section class="main-section"
id="Things_About_Me">
<header>Things About Me</header>
<p> I enjoy playing tennis, eating good food, and wearing pretty clothes.</p>
<p>Here is a list of my favorite things not to do.</p>
<ul><li>Clean cat poop</li>
<li>Running for any reason</li>
<li>Washing dishes</li>
<li>Sweating</li>
<li>Artificial candy</li>
</section>
<section class="main-section"
id="Places_I'd_Like_to_Visit">
<header>Places I'd Like to Visit</header>
<p>There are several places I would love to visit across the globe. It is nearly impossible to narrow down a list so I'm just going to address the ones I think of right now. Actually I'm going to just put a link to a website that is cool.
</p>
</section>
<section class="main-section"
id="Ajani_Goldmane">
<header>Ajani Goldmane</header>
<a href="https://mtg.fandom.com/wiki/Ajani_Goldmane">Ajani Goldmane Facts of Glory</a>
<p>When I was young I first learned of Magic The Gathering. Not from an intrest in MMRPGs or an over-obsession with nerdcore but because of my name.</p>
<section class="main-section"
id="Code">
<header>Code</header>
<code>
x = true;
if (x) then console.log("It is true");
</code>
<code>
x = true;
if (x) then console.log("It is true");
</code>
<code>
x = true;
if (x) then console.log("It is true");
</code>
<code>
x = true;
if (x) then console.log("It is true");
</code>
<code>
x = true;
if (x) then console.log("It is true");
</code>
<p>My name is shared with Ajani Goldmane, a powerful cat-warrior from this popular card game. When I would introduce myself to others some people would immediately mention this cat as a relative of mine. Although we are of no relation, I do honor Nagic The Gathering's use of culturally appropriate hero design.
</p>
<p>Ajani in originality is in fact a warrior name. It means "one who possesses after a struggle or battle". In this sense the cat-warrior and I have much in common.</p>
<p>Here is a list of all the ways Ajani Goldmane and I are similiar.
<ul><li>
We are both feline lovers. He is a cat and I own a cat. I also feel a cat-like spirit inside me.
</li>
<li>We both have long luscious manes. Ajani Goldmane has grey hair and I have red hair but we both have long thick hair.</li>
<li>Last but not least, both Ajani Goldmane and I are fierce. There are many definitions to that word but if you ever come across one of us you will immediately understand. Our presence is ravishing in all ways. Ajani's are powerful both in the Magic realm and reality.</li></ul>
</p>
</section>
<section class="main-section"
id="Conclusion">
<header>Conclusion</header>
<p>This is the conclusion of my technical document, thank you for attending</p>
</section>
<code>
x = 5;
y = 6;
z = x + y;
</code>
<br>
<nav id="navbar">
<header>Ajani's Document</header>
<a class="nav-link"
href="#Introduction">Introduction</a>
<a class="nav-link"
href="#Things_About_Me">Things About Me</a>
<a class="nav-link"
href="#Places_I'd_Like_to_Visit">Places I'd Like to Visit</a>
<a class="nav-link"
href="#Ajani_Goldmane">Ajani Goldmane</a>
<a class="nav-link"
href="#Code">Code</a>
<a class="nav-link"
href="#Conclusion">Conclusion</a>
</nav>
</main>
https://codepen.io/ajaniskt/pen/PopjQOR
@media only screen and (max-width: 600px) {
#navbar{
position: fixed;}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Challenge: Build a Technical Documentation Page
Link to the challenge: