Tell us what’s happening:
My navbar is always shown on the left side of the screen but the checker is still saying that it isn’t.
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<main id="main-doc">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<nav id="navbar">
<header>Minecraft Technical Documentation</header>
<ul>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#Getting_started">Getting started</a></li>
<li><a class="nav-link" href="#Logging_in_and_the_main_menu">Logging in and the main menu</a></li>
<li><a class="nav-link" href="#Starting_your_first_game_in_Singleplayer_mode">Starting your first game in SinglePlayer mode</a></li>
<li><a class="nav-link" href="#Selecting_the_right_game_mode_in_Minecraft">Selecting the right game mode in Minecraft</a></li>
<li><a class="nav-link" href="#Your_first_day_in_Minecraft">Your first day in Minecraft</a></li>
<li><a class="nav-link" href="#Minecraft_Controls">Minecraft Controls</a></li>
<li><a class="nav-link" href="#Mining_and_crafting">Mining and crafting</a></li>
<li><a class="nav-link" href="#Fighting_monsters">Fighting monsters</a></li>
<li><a class="nav-link" href="#About_this_article">About this article</a></li>
</ul>
</nav>
<div id="content">
<section id="Introduction" class="main-section">
<header>
<h1>Introduction</h1>
</header>
<p class="p-control">Minecraft is a virtual open world video game where players can dig, mine, build, craft, and enchant things. The game is typically described as a “sandbox game” because players can create their own worlds and experiences where the possibilities are truly limitless.</p>
<p class="p-control">Unlike normal video games, Minecraft allows you to be in control of the game, and it even has options allowing players to act as moderators and build their own coding/modding directly into the game!</p>
</section>
<section id="Getting_started" class="main-section">
<header>
<h1>Getting started</h1>
</header>
<p class="p-control">Getting started with Minecraft is super easy. First, you need to purchase and install the game. After installation is complete, simply start the game by running the launcher you downloaded from the Minecraft homepage, which also gives you the option to play from your browser. Now it’s time to log in, navigate the main menu, and select your game type. See our guide for beginners below.</p>
</section>
<section id="Logging_in_and_the_main_menu" class="main-section">
<header>
<h1>Logging in and the main menu</h1>
</header>
<p class="p-control">The launcher opens the News screen, which displays game updates and links. Enter your username and password in the lower right corner and click Log In to continue to the main menu.</p>
<p class="p-control">This list describes what you can do after you click the buttons on the main menu:</p>
<ul class="p-control">
<li><b>SinglePlayer</b>: Start or continue a basic game. The remaining portion of this article covers the options for starting a game in SinglePlayer mode.</li>
<li><b>MultiPlayer</b>: Join other players online.</li>
<li><b>Languages</b>: Change the language of the text in Minecraft. Use the tiny button, just left of the Options button, showing a speech bubble containing a globe.</li>
<li><b>Options</b>: Manage game options such as sound, graphics, mouse controls, difficulty levels, and general settings.</li>
<li><b>Quit Game</b>: Close the window, unless you’re in In-Browser mode.</li>
</ul>
</section>
<section id="Starting_your_first_game_in_Singleplayer_mode" class="main-section">
<header>
<h1>Starting your first game in SinglePlayer mode</h1>
</header>
<p class="p-control">To start your first game in SinglePlayer mode, follow these steps:</p>
<ol class="p-control">
<li>Click the SinglePlayer button to view a list of all worlds.
If you’re just starting out in Minecraft, this list should be empty.</li>
<li>Click the Create New World button to start a new game.
The Create New World page appears.</li>
<li>In the World Name text box, type whatever name you want and click the Create New World button at the bottom of the screen.</li>
</ol>
<p class="p-control">To turn on cheats, click the More World Options button, and then click the Allow Cheats button to turn cheats on or off.
</p>
<p class="p-control">Turning on game cheats increases or decreases the level of difficulty as you play and switches between Creative mode and Adventure mode. Cheats give you more control over the world when you’re just getting started.</p>
<p class="p-control">When you finish creating your world, the game automatically starts by generating the world and placing your avatar (character) in it.</p>
</section>
<section id="Selecting_the_right_game_mode_in_Minecraft" class="main-section">
<header>
<h1>Selecting the right game mode in Minecraft</h1>
</header>
<p class="p-control">Minecraft offers several different game modes that allow you to experience the open world in a unique way. The following types of Minecraft game modes are available:</p>
<ul class="p-control">
<li><b>Survival</b> — after randomly being spawned in a new world, players have to try to survive by gathering material, building shelter, gaining experience, and fighting off hostile mobs.</li>
<li><b>Creative</b> — a game mode where players have immediate access to almost all blocks and items, are invulnerable and immune to death, and have the ability to fly. The purpose of this game mode is to create/design unique worlds.</li>
<li><b>Adventure</b> — players interact with objects (levers, buttons) and mobs to complete an adventure.</li>
<li><b>Spectator</b> — invisible to everything and cannot interact with blocks, entities, or your inventory. This mode is typically used to observe other players' created worlds.</li>
<li><b>Hardcore</b> — similar to survival mode, Hardcore is set to the “hard” difficulty level permanently and players cannot respawn; once you die, the map is deleted (or you permanently become a spectator).</li>
</ul>
</section>
<section id="Your_first_day_in_Minecraft" class="main-section">
<header>
<h1>Your first day in Minecraft</h1>
</header>
<p class="p-control">When selecting SinglePlayer and Survival mode in Minecraft, your first day can be very exciting but also very stressful. You are immediately thrown into a world with little resources and have to prepare yourself to ensure you survive your first night, when hostile mobs are more likely to attack you.</p>
<p class="p-control">Typically, your first day in Minecraft involves things like collecting resources, punching woods, killing animals, building or finding shelter, gathering food, etc.</p>
</section>
<section id="Minecraft_Controls" class="main-section">
<header>
<h1>Minecraft Controls</h1>
</header>
<p class="p-control">For the purpose of this Minecraft guide, we are assuming that you’re playing the game on a PC. If you are using any other device, the controls might be a bit different. Learn the following controls, because they are key for your survival.</p>
<ul class="p-control">
<li><b>To move around</b>:<br><code>W, A, S & D keys</code></li>
<li><b>To jump</b>:<br><code>Spacebar</code></li>
<li><b>To run</b>:<br><code>Double tap W</code></li>
<li><b>To crouch or sneak</b>:<br><code>Hold shift</code></li>
<li><b>To access inventory</b>:<br><code>E</code></li>
<li><b>To break blocks or to attack</b>:<br><code>Left click</code></li>
<li><b>To use or place items on the map</b>:<br><code>Right click</code></b></li>
<li><b>To throw the item on the ground</b>:<br><code>Q</code></li>
<li><b>To quickly go through your inventory slots</b>:<br><code>1-9 number keys</code></li>
</ul>
</section>
<section id="Mining_and_crafting" class="main-section">
<header>
<h1>Mining and crafting</h1>
</header>
<p class="p-control">Like the name says, Minecraft is all about mining stuff and crafting stuff. Collecting and mining is easy. You can go to a tree and left click to break and collect blocks. These blocks can be placed to build a house or to craft items. In your inventory screen, you can see four squares in the top right. This is your crafting area. Four wooden blocks can be used to craft a plank and planks can be used to craft a table. Simple. You can also mine iron and rare material to craft much cooler stuff.</p>
</section>
<section id="Fighting_monsters" class="main-section">
<header>
<h1>Fighting monsters</h1>
</header>
<p class="p-control">The final stuff to cover is to tell how you can fight monsters and other hostile creatures. And fighting is good because once you kill them, you get resources and rewards. Monsters come out at night so that is the best time to kill them. You would need some weapons that you can craft during the day time. A pickaxe or shovel is good enough as long as you don’t go to a dangerous location like a cave. Fights are all about timing. Make sure they are in your weapon range and hit them before they can hit you. That’s it. This Minecraft guide covered some essential things for you to consider while playing the game for the first time. In our future Minecraft basics stories, we will cover more advanced controls and gameplay mechanics.</p>
</section>
<section id="About_this_article" class="main-section">
<header>
<h1>About this article</h1>
</header>
<p class="p-control">This article is from the book:
<b>Minecraft Modding For Kids For Dummies</b>;</p>
<p class="p-control"><b>About the book authors</b>: Sarah Guthals, PhD, is a social software engineer, entrepreneur, and former engineering manager at GitHub. She is coauthor of Helping Kids with Coding For Dummies. Stephen Foster, PhD, is the CEO of ThoughtSTEM, a company that teaches computer science to kids across America. Lindsey Handley, PhD, is the COO of ThoughtSTEM and has hundreds of hours of experience as a classroom instructor for Minecraft-based science and computer science classes.
</p>
<p class="p-control"><b>This article can be found in the category</b>:
Minecraft</p>
</section>
</div>
</main>
styles.css
body {
background-color: hsl(191, 0%, 6%);
font-size: 1.3rem;
font-family: sans-serif;
color: white;
margin: 20px;
}
#navbar {
position: fixed;
align-content: left;
height: 100%;
width: 18rem;
border-right: solid hsl(145, 9%, 65%) 4px;
padding-right: 0.3rem;
}
#navbar header{
font-size: 1.7rem;
font-weight: bold;
width: 100%;
text-align: center;
}
#navbar ul {
height: 88%;
padding: 0;
overflow-y: auto;
}
#navbar li {
text-align: left;
font-size: 1.2rem;
border-top: solid white 1px;
margin: 0;
margin-right: 1rem;
padding: 20px 0 20px 45px;
list-style: none;
background-image: url("http://assets.stickpng.com/images/580b57fcd9996e24bc43c2f1.png");
background-repeat: no-repeat;
background-position: left center;
background-size: 30px;
}
#navbar a {
color: white;
text-decoration: none;
}
#navbar a:hover {
color: hsl(145, 9%, 65%);
}
#content {
position: absolute;
margin-left: 20rem;
margin-right: 1.4rem;
}
.p-control {
font-size: 1rem;
color: hsl(145, 9%, 65%);
line-height: 1.6rem;
}
li {
line-height: 3rem;
margin-bottom: 1rem;
}
code {
display: block;
text-align: left;
position: relative;
line-height: 2;
background-color: black;
padding: 15px;
margin: 10px 30px 10px 5px;
border-radius: 4px;
}
@media (max-width: 700px){
#navbar {
width: 10rem;
}
#navbar header {
font-size: 1.3rem;
}
#content {
posiiton: fixed;
margin: 12rem;
margin-top: 0;
width: 55%;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Challenge: Build a Technical Documentation Page
Link to the challenge: