Help please, My technical Documentation page is only failing ONE user story :-(

https://codepen.io/malthouse88/pen/GbNdbV

There is my pen, I’ve been sitting on this for hours lol. I’m failing the user story: On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.
Not a clue where to go next I feel like I’ve tried everything. Any and all feedback is welcome!

This isn’t valid CSS

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
  rel="stylesheet"
  >

You need to move it to the HTML head, you can use the Settings button go to the HTML tab and paste it into the box "Stuff for <head>". Then remove it from the CSS.

Edit: If you do want it in the CSS you have to use the @import

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

1 Like

Thank you! I’m not sure what happened but i deleted some errors in my CSS and everything passes now! I appreciate your time! Thanks again!

Hi @Malthouse, before you ask for review of your page, codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link. You have some invalid HTML elements.

1 Like

It says stuff about the xmp not being needed but I don’t know how else to make that stuff look like code n the website? Any thoughts?

Use the <pre> and <code> elements instead. Note that you will need to escape characters as needed (online tool).

1 Like

As @lasjorg said, use the <pre> and <code> elements.
I did a quick Google search using “html xmp” and this was the first hit which tells you which elements to use as a replacement for xmp.

1 Like

You got all 16 tests!

1 Like

Awesome! I think I fixed it, it looks so much better! Thanks you so much!