Need help with aligning flex naigation links

How do I create equal margin for links inside nav element? I tried setting margin- left for ul or li elements but it didn’t work. I want those links to start from left edge
Here is the link: https://codepen.io/newbiewebdeveloperr/pen/ZwWoPp?editors=1100

not sure I understand you question,.
By any chance do you have software where you can create an image of what you want the final product to look like?

It’s kind of hard to understand since I am building for mobile screen first(plan to use media query for larger screens). I wanted to make the left margin and right margin equal for unordered list i.e distance of left edge to “product details” = distance of right edge to “contact us”

I’m assuming this is what you want?


nav ul {
  /* display: flex; */
  /* justify-content: space-between; */
}

nav ul li {
  /* display: inline; */
  list-style: none;
  border-right: 1px solid black;
  padding-right: 5px;
}

I think it’s solved by this:

nav ul {
display: flex;
justify-content: space-between;
padding: 0 5em;
}

You could check this by using this at the top of your css:

  • {
    border: 1px solid red;
    }

It shows al the boxes, so you are able to see the effect of changes in the code more precisely.

1 Like

very good idea, I typically assign background colors that are removed later, but this approach is much quicker.

1 Like

I think both the red lines and the colours are helpful. I’ve learned this on Udacity. But background can be useful as well. Depends on the situation.