<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .hero,
            .about,
            .guides,
            .contact {
                max-width: 1000px;
                margin: 0 auto;
                margin-bottom: 20px;
            }
            .mainstage {
                padding: 0 70px;
                display: flex;
                align-content: center;
                justify-content: center;
                margin-top: 20px;
                margin-bottom: 20px;
            
            }

        .nav {
            display: flex;
            align-content: center;
            justify-content: center;
            gap: 60px;
            list-style-type: none;
            
        }
        .nav li a {
            text-decoration: none;
            color: black;
            font-size: 1.2rem;
        }
        .hero {
      background-color: #eee;
      height: 200px;
    }

.hero h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.about {
      background-color: #eee;
      height: 200px;
    }

.about h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.guides {
      background-color: #eee;
      height: 200px;
    }

.guides h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.contact {
      background-color: #eee;
      height: 200px;
    }

.contact h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.footer {
      background-color: #777;
      height: 40px;
    }

.footer p {
      margin: 0 auto;
      line-height: 1.7;
    }

        </style>
<center>
    <img src="placeholder.png" alt="Placeholder logo"> 
</center>
        <div class="mainstage">
            <ul class="nav">
                <li><a href="about.html"><button>About Me</button></a></li>
                <li><a href="guides.html"><button>Guides</button></a></li>
                <li><a href="posts.html"><button>Blog? Maybe?</button></a></li>
                <li><a href="TheWhateverZone.html"><button>Page Of Random</button></a></li>
            </ul>
        </div>