Technical documentation page. Nav bar and main-doc issue CSS

Hi guys,

I am struggling to get rid of a blue line in my technical page. I have no idea how I managed to do that. Also, my main-doc text and sections will not go up next to my nav-bar. Can someone please have a look at my CSS code? Thank you.

here is my code-pen:

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.93 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

@import url('');

doesn’t belong in the CSS editor of codepen. Remove it and it’s all is good.

If you recall, that style element goes in the head of the HTML. That can go in the settings in codepen.

Thanks for that. But, my navbar seems to be taking up the top part of the page. Can you glance at my CSS for that please. Is the issue due to my media query?

@hmaryan86, you have issues in the CSS editor. The <html> and </html> tags do not belong in the CSS editor.

In codepen, think of the HTML editor as the HTML document you write. However, it only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The CSS editor is the same as your external CSS stylesheet. You wouldn’t put HTML elements in an external stylesheet.

One thing you can also do, as a suggestion, is to switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.
If you do this you’ll see some invalid properties in your CSS.

Side note, you can leave the import line in CSS just don’t wrap it with the style tags. As mentioned, an external stylesheet will not contain HTML element.
Also, in CSS you import the font family. In HTML, you would link it so when you moved it it’s improper. That’s why you’re no longer seeing your font family.

The body should have 2 children first nav and then main. You can float both of these left or create two flexbox columns or use CSS grid to make two columns. I never tried to make them inline-blocks maybe it’s possible.

I suggest just cutting the body in half vertically with the two child elements mentioned above, in a new codepen, before adding everything else. I think it would be easier then unraveling this one.

Or comment this one like crazy to help visualize the structure and your intent versus reality. It could be challenging.

This is wrong:

  mid-width: 300px;

No angle brackets in a CSS selector.
No mid-wdth property

#nav span {
        display: inline-block;
  position: relative;

There is a nav element and an id of navbar but no id of nav.

nav ul {
  padding: 30px, 30px;
  display: left;
  justify-content: center;
  list-style: none;
  max-width: 250px;

There is a left property usually used after the position property, but not a display:left;
of which I’m aware .

1 Like

Thank you for your lovely tips. I appreciate it :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.