Could someone give help me with my navigation bar CSS?

HTML-CSS
1

Hello,

I’m working on my technical documentation project. I’m obviously still learning a lot. I began creating the navigation bar, but before I get any further I want to get some feedback.

I’ve given the elements temporary background colors so I can visualize what I’m doing. I think I’m doing something wrong.

  • My nav element is not reaching all of the way to the top and bottom; there is a small white gap appearing.

  • My ul element is stretching outside of the nav element on the left and not reaching all the way on the right.

I guess I’m asking if those two things are normal or if I’ve done something completely wrong.

I’d also be curious for feedback on the general cleanliness of my CSS so far. I’m trying to put in work to make these projects look good visually but also in terms of the code itself.

2

Hello there,

This is because most browsers add their own margin/padding to every page. The way to get around this is start with a clean-css-plate:

* {
  margin: 0;
  padding: 0;
}

This selects every element on the page, and sets the margin and padding to 0. (Ensure this is the first thing in your CSS file.)

I am not sure what you are referring to here…

Also, some tips for CodePen:

  1. CodePen does not expect any content outside the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyze your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

3

The issue with your UL element is caused by your width: 100%. Default browser CSS adds left padding to the UL which is combining with your width to produce a width that exceeds the container.

4

Thank you very much! All of this was incredibly helpful. I did not previously know that about the browser adding a padding :slight_smile:

5

That was it! Thanks :slight_smile: