Need Help Spacing out content

Hi guys,

Can anybody help me on how I can get the content at the top right corner to have spaces in between them? link to code below

Cleanest way would be using gap property, but unfortunately it currently has poor support on flexbox.

If you don’t need to support IE11, you could use gap with grid:

.navcontent {
  list-style-type: none;
  display: grid;
  gap: 8px;
  grid-auto-flow: column;
  justify-content: end;
}

Hi, I’ll try to help you out with that :slight_smile:

… but first some tips :smiley:

In codepen inside html tab you don’t have to put <!DOCTYPE>, html or head, instead click on the settings icon next to html tab and you can put all the stuff for head, like title, etc.

#header{
  width: 100%;
}

In your code you set width of header tag to 100%, as it is block element, you don’t have to do that as block elements always take up full available width.

Then to move the navigation to the right side you use padding-left: 80%, which I don’t think is very good solution. Instead I would do something like this:

#header {
  display: flex;
  justify-content: flex-end;
}

And that’s it, now we have the navigation on the right side.

Also, in your code you have

display:flex;
flex-direction: row;

By default, flex-direction is set to row so you don’t have to set it :slight_smile:

Now there are many ways to position nav items in one line and add some spacing between them, very simple one would be:

.navcontent {
  /* list-style is just a shorthand */
  list-style: none;
}
.navcontent > li {
  display: inline-block;
  margin-right: 20px;
}

Here is a codepen with all the changes I made:

1 Like

Thank you! Its perfect :grin: