I'm trying to make the space between the items of the nav bar be the same between each other. Sounds like something simple but I haven't managed to do it. I would really appriciate some help with this. Here's the html and the css. Here's the relevant code:Here's a photo of the output

HTML:

<nav class="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="tweets.html">Why programming? <a></li>
                    <li><a href="goals.html">Aspirations and goals<a></li>
                    <li><a href="my_projects.html">Projects</a></li>
                    <li><a href="books.html">Favourite books</a></li>
                    <li><a href="interests.html">Interests</a></li>
                </ul>
            </nav>

CSS:

nav{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    right: -90px;
    flex-wrap: wrap;
    bottom:10px;
    align-items:flex-end;
    font-size: 20 px;
    padding: 0px;
    line-height: 0px;
    padding-left:50px;
    padding-right: 50px;}

CodePudding user response：

Can't exactly test it with just the code provided but try setting your margins in css, they should control your distance. You may want to tinker with margin-left and margin-right

justify-content: space-evenly; /* Distribute items evenly Items have equal space around them */ May also be worth a try

CodePudding user response：

your css is for nav ul, not nav

CodePudding user response：

As because you are using flex-box, so you can use justify content space between, space around or space evenly, or you can use margin left, right property

CodePudding user response：

You can use flex box on ul as:

ul {
  display: flex;
  list-style-type: none;
  justify-content: space-between;
}

ul {
  display: flex;
  list-style-type: none;
  justify-content: space-between;
}

<nav class="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="tweets.html">Why programming? </a></li>
    <li><a href="goals.html">Aspirations and goals</a></li>
    <li><a href="my_projects.html">Projects</a></li>
    <li><a href="books.html">Favourite books</a></li>
    <li><a href="interests.html">Interests</a></li>
  </ul>
</nav>

CodePudding user response：

To fix your problem after I tested it with the code above and fixed it just by adding a few things. This works with your existing css code still being used!!

You not using the li or ul class in your css which is a big part of what your trying to do. You can add li a to have padding-left: 4px; and padding-right: 4px; and display: flex; - Also by making ul list-style-type: none; than your list won't have a list icon next to it.

ul {
  list-style-type: none;
}
li {
  float: left;
}
li a {
  display: flex;
  padding-left: 4px;
  padding-right: 4px;
}

CodePudding user response：

Do this

ul {
    display: flex;
    justify-content : space-between or space-evenly (as per design)
    width:100%
}