How do I make the spaces between my links in my navbar wider?

Issue

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 class="header">
  <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>

Solution

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 class="header">
  <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>

Answered By - Brett Donald