How can I space out the words in my navigation bar as well as turn all the text white?-CodePudding

I've tried to make a bar with not much success. I would like to space each of the three words "Main Page", "About Me" and Bibliography apart with each of them being in the left, center, and right respectively.

I'd also like to change the text of them so that they're white. Here is a sample of what it looks like now and my code below:

<!DOCTYPE html>
<html>
<head>  
    <style>
     h1 {
          text-align: center;
        }
     
     h4 {
          color: #00008B;
          font-size: 2em;
        }

     h5 {
          text-align: center;
        }

    body {
           background-color: #FAFAFA;
         }

 .navigation {
           color: #ffffff;
           list-style-position: 
           box-sizing: border-box;
           margin-left: 0;
           padding: 0;
           background-color: #000000; 
           
         }


.middle {
           display: block;
           margin-left: auto;
           margin-right: auto;
           width: 50%
        }

 .footer {
           color: #0000FF;
        }

    </style>
</head>
<body>
       <h1>Main Page</h1>
       <h5>Osirin bin Osiris</h5>

        <nav>
        <p > 
          <a  href="index.html">Main Page</a>
          <a  href="about.html">About Me</a>
          <a  href="bibliography.html">Bibliography</a>
        <p>
        </nav>

    <h4>History of the Internet</h4>

    <img src="ARPAnet.png" alt="ARPAnet diagram" length="607" width="490" >

    <p> The modern day internet arose from the intranet developed by the U.S. military in 1969 (known as ARPAnet). Arpanet connected university computers across the country. It was restricted to sharing research material and was difficult to use.
Despite this, it was the essential foundation for the modern day internet that spans the globe. It’s important to note that the world wide web is not the same thing as the internet. The world wide web is a subset of the internet. It’s a collection of webpages containing images, videos, text, and sounds that are accessed using the http protocol. The best analogy to explain this difference would be to imagine a highway. The internet can be likened to a major highway and the world wide web are passenger car. There are many passenger cars that pass on the highway however; the highway contains more than just cars. It has trucks and vans travelling for business. In the same way, the internet isn’t just used by individuals but also governments, businesses and even satellites communicating with each other using different protocols.
   </p>

    <h4>How a page is delivered</h4>
    <p> There are many things that need to work in order to bring a webpage to a device. These are: 
        <ul> 
          <li> Internet connection </li>
          <li> Web browser </li>
          <li> Server </li>
        </ul> 
    <br>

When a person types in a web address, the operating system connects to a domain name server which will send back the I.P address that matches the text address to the user’s device. As the webpage appears, the user then interacts with the site by sending and receiving requests (i.e. clicking buttons, typing words, looking up images). 
   
   <br><br>

Information does not get communicated through the internet as it appears on a website. Instead, the browser breaks down texts, words, and images into small packets of information which are then sent from a computer/smartphone to the router, to a web server and then down fibre optic cables across the globe.
    </p>

<footer>    
<p ><b> </b></p>
</footer>

</body>
</html>

CodePudding user response：

Many solutions. One solution would be to use flex box. Like that. You can add only this to your style:

.navigation {
  display: flex;
}
.navigation a {
  display: block;
  width:33%;
  text-align: center;
  color: white;
}

working example

     h1 {
          text-align: center;
        }
     
     h4 {
          color: #00008B;
          font-size: 2em;
        }

     h5 {
          text-align: center;
        }

    body {
           background-color: #FAFAFA;
         }

 .navigation {
           color: #ffffff;
           list-style-position: 
           box-sizing: border-box;
           margin-left: 0;
           padding: 0;
           background-color: #000000; 
           
         }


.middle {
           display: block;
           margin-left: auto;
           margin-right: auto;
           width: 50%
        }

 .footer {
           color: #0000FF;
        }

.navigation {
  display: flex;
}
.navigation a {
  display: block;
  width:33%;
  text-align: center;
  color: white;
}

<!DOCTYPE html>
<html>
<head>  
    <style>

    </style>
</head>
<body>
       <h1>Main Page</h1>
       <h5>Osirin bin Osiris</h5>

        <nav>
        <p > 
          <a  href="index.html">Main Page</a>
          <a  href="about.html">About Me</a>
          <a  href="bibliography.html">Bibliography</a>
        <p>
        </nav>

    <h4>History of the Internet</h4>

    <img src="ARPAnet.png" alt="ARPAnet diagram" length="607" width="490" >

    <p> The modern day internet arose from the intranet developed by the U.S. military in 1969 (known as ARPAnet). Arpanet connected university computers across the country. It was restricted to sharing research material and was difficult to use.
Despite this, it was the essential foundation for the modern day internet that spans the globe. It’s important to note that the world wide web is not the same thing as the internet. The world wide web is a subset of the internet. It’s a collection of webpages containing images, videos, text, and sounds that are accessed using the http protocol. The best analogy to explain this difference would be to imagine a highway. The internet can be likened to a major highway and the world wide web are passenger car. There are many passenger cars that pass on the highway however; the highway contains more than just cars. It has trucks and vans travelling for business. In the same way, the internet isn’t just used by individuals but also governments, businesses and even satellites communicating with each other using different protocols.
   </p>

    <h4>How a page is delivered</h4>
    <p> There are many things that need to work in order to bring a webpage to a device. These are: 
        <ul> 
          <li> Internet connection </li>
          <li> Web browser </li>
          <li> Server </li>
        </ul> 
    <br>

When a person types in a web address, the operating system connects to a domain name server which will send back the I.P address that matches the text address to the user’s device. As the webpage appears, the user then interacts with the site by sending and receiving requests (i.e. clicking buttons, typing words, looking up images). 
   
   <br><br>

Information does not get communicated through the internet as it appears on a website. Instead, the browser breaks down texts, words, and images into small packets of information which are then sent from a computer/smartphone to the router, to a web server and then down fibre optic cables across the globe.
    </p>

<footer>    
<p ><b> </b></p>
</footer>

</body>
</html>

CodePudding user response：

this should get you going in the right direction, replace your .navigation rule with this and add the styles for link

.navigation {
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  /*if you dont want the items to go all the way to the end*/
  padding-left: 10px;
  padding-right: 10px;
  background-color: #000000;
}

.navigation a {
  color: white;
}