Why i cannot spread the items of my ul list horizontally and add space between them? can you please help

HTML-CSS
1 
type or paste code here
#header-img{
  width:100px;
  position:left;
}
header{
 width:100%;
  display:flex;
  align-items:center;
  position:fixed;
}
ul{
  list-style:none;
  color:teal;
  display: flex;
  justify-content:space-around;
}
nav{
  width:100%;
}
2

Do you mean put a set gap between each one? It’s difficult to tell without a visual example: the CSS on it’s own doesn’t describe what you want

At the minute they’re just set as flex items, they flex. space-between means that any remaining space will be distributed between the items. So if you have say three items and they’re not very wide, then they’ll have a space between. If you’ve got ten items then there won’t be any space left over, so there’s no space to distribute

Use gap to add a gap of a set size

1 Like
3

@hadeelAlbdairi Not sure I get what the problem is from just the code you’ve shared. It may help making some remarks about your problem before sharing some code.

That said, if I’m to guess from the title of your post, I think your problem might be solved by adding these lines in your code:

li {
    display: inline;
}
1 Like
4

OP is using flex, that won’t do anything at all

5

that should do it. :+1:

6

i am trying to solve the product landing page challenge, so I made a list then I styled that list to none.
now I want this list to be placed horizontally at the top of the page having equal space among it’s items.
i have done it once but then it got lost and now I’m failing at it again
ul
this is how it appears and I want it to look like this instead

ul2
ul2815×98 2.51 KB

can you please say what I’m doing wrong?

type or paste code here
#header-img{
  width:200px;
  position:left;
}
header{
 width:100%;
  display:flex;
  align-items:center;
}

ul{
  list-style:none;
  color:teal;
  display: flex;
  justify-content:space-around;
}
li {
    display: inline;
}
nav{
  width:100%;
}
7

i watched a video and they were suggesting this, can you please check my latest reply and tell me if u r finding something wrong?

8

i will try to do so just now, thanks for ur help

9

i ran a quick pen and used your ul css code and it displays correctly on my end side by side. Maybe refresh the page? Also you might want to post the html of the list in addition to the css that you’d need help with so it can be better reviewed the issue that you are having. Just a suggestion. :slight_smile:

10

it’s really not working getting really tired why it did changed by itself
I have another question if u can help:
when I cope image address from google I do not pass the test if the src does not start with HTTP
do u have any idea how can I know how to pick a specific picture without having the same problem?

type or paste code here
<header id="header">
  <img id="header-img" src="https://www.greatestphysiques.com/wp-content/uploads/2018/08/Danielle-Robertson.10.jpg" alt="brand-logo">
  <div>
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#home" id="home">Home</a></li>
    <li><a class="nav-link" href="#program">Program</a></li>
<li><a class="nav-link" href="#fitness">Fitness</a></li>

<li><a class="nav-link" href="#dbactive">DB Active</a></li>
      </ul>
  </div>
    <div id="home">
    </div>
this is my HTML
11

Have you tried @DanCouper solution about using gap?
You need to use it on Flex container:

ul{
  list-style:none;
  color:teal;
  display: flex;
  justify-content:space-around;
  gap: 1em;
}

This property works with flexbox, grid and columns too: gap (grid-gap) - CSS: Cascading Style Sheets | MDN

1 Like
12

yes it worked thank you

13

it worked thank u so much

2 Likes
14

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