Product Landing Page - header question

[cwright718]

Hi there,

I’m working on the Product Landing Page project and I can’t get my <nav> element (the navigation text) to sit within my <header>. The logo seems to be fine - any tips? I’ve tried everything I can think of!

FCC: Product Landing Page

This is still a WIP but any other tips welcome! Thanks in advance!

[Jaydog]

Hi
75rem a bit excessive for margin-left on the ul. Also may be worth trying the header container as flex rather than the ul.

[lasjorg]

As said, you can make the header a flexbox container so the logo and nav can share the horizontal space and remove the large margin-left you have added to the ul #nav-bar ul as well which is pushing it.

To get everything to line up you will need to use some more flexbox, give elements a width to make the space distribution work, and remove some default margin and padding on the ul.

Example

header {
  background-color: #fadbde;
  border-radius: 10%;
  box-shadow: 0 10px 10px grey;
  height: 8rem;
  width: 100%;
  position: fixed;
  display: flex;
}


#nav-bar {
  display: flex;
  width: 100%;
}

#nav-bar ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  font-size: 18px;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
}

---

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).