Trying to use justify-content

[Donna]

EDIT: Appologies, I am trying to show my full code, but I can not seem to figure out how to show it correctly.

Hello, I am wanting to space out a few things in a row, I have a img and a few anchor tags, that I want to be spaced evenly. But the code that I have doesnt seem to space it evenly, so I am guessing I have went wrong somewhere. Could someone please help me out

ExXEZMe

#Navigation
{
    display: flex;   
    justify-content: space-evenly; 
}


#Navigation a
{
    color:chocolate;
    
}

[eoja]

If your code is on codepen or similar just copy and past in the link.

Or copy and past like you did with the code you have in your question (inside 3 back ticks).

In the HTML code you’ve provided, there is no element with an id of “Navigation”, so it is really difficult to help, as your links don’t work. Also FYI, your footer element should be in side the body element.

[eoja]

Now the link to your code works and I can see that you have the id of “Navigation” on an article element that has one nested nav element. So, your css is working fine. What you are trying to space-evenly is nested in your nav element, so you need to put your styling on the nav rather than the article.

I’m not sure if it is good practice to put your nav in an article.
https://www.w3schools.com/TAGS/tag_article.asp

[lasjorg]

It is valid but I wouldn’t use it for the main navigation. You can have an article navigation nested within the article but the main navigation likely belongs inside a header and not an article.

As said, you always have to use the direct parent of the child elements you want to make the flex items. Also, for the space distribution to work there has to be space. It is often necessary to add a width to the parent element so it takes up more space than just the minimum required for the children (auto) for it to be able to distribute the space between the child elements.

Example

nav {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}