Build a Technical Documentation Page

Build a Technical Documentation Page


Tell us what’s happening:
I write the code which has the same responsive effect as the example, However, i couldn’t pass

User Story #14: On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user.

I checked Youtube, find MDN, search google, I couldn’t find the answer, could anyone help me?

Below is what I wrote, hope any senior could give me a hint where shall I amend

Would like to thank you in advance for helping

Your browser information:

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

Link to the challenge:


To be always visible the navbar element needs to be fixed, (display property). Then to be at the left, I think it needs to be at 0px offset from the left, or floated to the left.


Actually I did tried, position: fixed

The main-doc overlap with navbar afterwards

I need to think a way to set both main-doc and navbar to be block

Coding so fun and challenging


I have changed some of your CSS. Now it works.

body {
line-height: 1.5rem;
font-family: ‘Roboto’, sans-serif;

#navbar {
border-right: solid;
border-left: solid;
border-color: #999;
/* position: fixed */

.nav-link {
list-style: none;
line-height: 40px;
display: block;
padding: 5px;
border: 2px solid #ddd;

.highlight {
background-color: #eee;
display: inline-block;
margin: 10px 0px;
padding: 5px;
width: 100%;

code {
font-size: 1.5rem;

header {
font-size: 1.5rem;
line-height: 50px;
padding: 5px 0px;

@media screen and (max-width: 500px) {
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;

#navbar > a {
text-decoration: none;
color: #000;


Yes the test is passed. However, when it’s reach smaller screen, the media query seen not working.

I really appreciate your help, I think we only can pass this test with fixed position but not grid.

Thank you for taking your time to help me this


If you want to use grid, you should set grid template areas and use them for styling.

  grid-area: nav
  grid-area: main

After setting, you can use as this:


here is a very brief and good page for this:


Thanks for your suggestion, I think i going to style it again entirely when I free. Coding is so fun