How do I make the spaces between my links in my navbar wider? I am trying to make a website for my production company.

I want Home to be on far left, Portfolio to be on the left, Contact on the right, and About on far right.

body {
  margin: 0;
}

.header {
  Color: #FFFFFF;
  background-color: #000000;
  padding: 50px;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: justify;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

<div >
  <h1>Sphinx Productions</h1>
</div>

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">Portfolio</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
  <ul style="font-size:20px">
  </ul>

CodePudding user response：

You need to use display: flex and justify-content: space-between. This page is required reading regarding flex boxes.

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: space-between;
}

li {
}

li a {
  display: block;
  color: white;
  text-align: justify;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

<div >
  <h1>Sphinx Productions</h1>
</div>

<ul>
     
    <li><a href="default.asp">Home</a></li> 
    <li><a href="news.asp">Portfolio</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>

  </ul>


</body>

CodePudding user response：

Just give padding in li in style.css

li {
padding : 10px;
}

CodePudding user response：

I would use CSS grid (flexbox is also an option), which will allow you to organize your links into 4 columns.

Create a div and set its display to grid:
HTML

<div >
  <div >One</div>
  <div >Two</div>
  <div >Three</div>
  <div >Four</div>
  <div >Five</div>
  <div >Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: 20% 30% 30% 20%;

}

Change the grid-template-columns as needed to get the right spacing. You can adjust column-gaps and more, just look up the documentation.

CodePudding user response：

body {
  margin: 0;
}

.header {
  Color: #FFFFFF;
  background-color: #000000;
  padding: 50px;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: justify;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
li:nth-child(3),
li:nth-child(4){
  float: right;
}

<div >
  <h1>Sphinx Productions</h1>
</div>

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">Portfolio</a></li>
  <li><a href="contact.asp" class = "links-right">Contact</a></li>
  <li><a href="about.asp">About</a></li>

  </ul>

What is `nth-child()`?

nth-child() is a pseudo-class css selector that selects a child and styles it using the css you put in.

For example:

<body>
    <p>This is the first child of the body tag</p>
    <p>This is the second child</p>
    <p>This is the third child(selected)</p>
    <p>This is the fourth and last child</p>
</body>

p:nth-child(3){
    -----
}

The nth-child() takes one argument and that is what child will be selected.

What about `float`?

This is a property that will move elements to the position you input. It will stay structured with the rest of the elements.

for example:

<p>first and second child will be selected</p>
<p>----me----</p>
<p> not me </p>

p:nth-child(1),
p:nth-child(2){
    float: right;
}

They will go to the right, but it won't overlap or do anything crazy.

What is nth-child()?

What about float?

What is `nth-child()`?

What about `float`?