Help with Navigation bar on Landing Page

1

Hello,

I can’t get my links to be all on one row in my navigation bar. Listed bellow is my code pen. Could some one take a look and see what i am doing incorrectly.

https://codepen.io/cmyhren/pen/QRrXoK

2

You want the ul to be a flex container, remember when setting flexbox on a container it only affects the direct children.

You have a few issues in the CSS:

  1. This is not a CSS comment
    // not a comment
    /* this is a comment */

  2. You have nested selectors in .nav-bar, that does not work in normal CSS (you would need to use a CSS preprocessor, like SCSS, for that).

  3. You have some CSS I don’t think you really want but I will let you work on it, I know flexbox can be a little confusing at first.

  4. I would zero out the default margin and padding on the body and ul.

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}