JSFiddle - React, Tailwind, and code Playground

HTML

<body bgcolor="gray">
    <nav>
        <ul>
        <li> <a href="http://www.geonet.org.nz/quakes/felt"> Current Earthquakes </a> 
        </li>
        <li> <a href="http://www.dropcoverholdon.org/"> Drop! Cover! Hold On! </a> 
        </li>
        <li> <a href="https://www.google.com.au/maps/place/Blenheim,+New+Zealand/@-41.5290857,173.932808,13z/data=!3m1!4b1!4m2!3m1!1s0x6d390e0080e269bd:0x0a00ef88e796a530"> Location of Blenheim </a> 
        </li>
        <li> <a href="#"> About Us </a> 
        </li>
        <li> <a href="bibliography.html"> Bibliography </a> 
        </li>
        </ul>
    </nav>
    <img src="img1.png" width="100%">
    <p>
        <center>paragraph</center>
    </p>
    <img src="img2.png" width="100%">
    <p>
        <center>paragraph 2</center>
    </p>
    <img src="img3.png" width="100%">
    <p>
        <center>Parapgraph 3</center>
    </p>

CSS

*{
    margin: 0;
    padding: 0;
    line-height: 1;    
}
h1 {
     font-family: Arial;
     font-size: 50px;
     font-weight: bold;
     color: black;
     text-align:;
     width: 100%;
     float: center;
     margin: 0 0 0 0;
     padding: 0;
     list-style: none;
 }
 body {
     color: white;
     font-family: Arial;
     font-size: 20px;
     margin: 0 0 0 0;
     max-width: 100%;
 }
 /* Navigation Bar Styling */
 nav {
     margin: 0 0 0 0;
     font-family: Arial;
     font-size: 100%;
    width: 100%;
    overflow: hidden;
 }
 nav ul{
     list-style: none;
 }
 nav ul li {
     float: left;
    width: 20%;
 }
 nav li a {
     background-color: black;
     display: block;
     padding: 0 0;
     text-decoration: none;
     font-weight: bold;
     color: white;
     border-right: 1px solid gray;
 }
 nav li a:hover {
     color: black;
     background-color: white;
 }