Is there any easy way to make the spacing between the buttons look more professional without taking 4 hours?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Puggy Adventure Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-color: rgb(237, 227, 227);">
    <header>
        <section>
            <h1 style="position:absolute; display: flex; top: 0%; left: 2%; color:rgb(182, 21, 185); font-style: italic;"><strong>Puggy Adventures</strong></h1>
        </section>
    </header>
    <div class="navigationBar" style="background-color: rgb(123, 120, 123); height: 50px;">
        <section>
            <button class="homeButton" style="position: absolute; display: flex; left: 20%; top: 3.5%;"><strong>Home</strong></button>
        </section>
        <section>
            <button class="newsButton" style="position: absolute; display: flex; left: 30%; top: 3.5%;"><strong>News</strong></button>
        </section>
        <section>
            <button id="supportButton" style="position: absolute; display: flex; left: 40%; top: 3.5%;"><strong>Support</strong></button>
        </section>
        <section>
            <button id="aboutButton" style="position: absolute; display: flex; left: 50%; top:3.5%;"><strong>About</strong></button>
        </section>
    </div>
    <main>
        <img src="" id="featuredImage" style=" position: absolute; display: flex; height: 200px; width: auto; left: 20%; top: 40%;">
        <section>
            <h2>Storyline</h2>
        </section>
        <section>
            <p style="position: absolute; display: flex; top: 40%; left: 45%; text-align: center;"><strong>The Puggy Adventure offers a school-friendly experince which is designed to keep you entertained for hours! Our team of professionals with google slides know how to make you have the best experince possible while playing our game! This year the puggy adventure is mostly in 1st person POV! along with some 3D models being injected into the game.</strong></p>
        </section>
        <section>
            <iframe width="220" height="200" src="https://www.youtube.com/embed/VJEVxYyTFRI" ?autoplay=1 frameborder="0" style="left:0%; top: 40%; position: absolute; display: flex;"></iframe>
        </section>
    </main>
    <script src="index.js"></script>
</body>
</html>

I have tried on other projects to make the buttons closer together manually and testing out different percentages but it took so much time and was so boring, there has to be a better way to do this.

Solution

I'm not sure what your end-goal is with this but you need to remove all the absolute positioning from your code and used flex-box or css grid instead. This way you can position items on your page using a flexible and responsive pattern. I would recommend this for further reading. Here is a very basic example of using flex-box with some code to get you started. Uncomment the /*flex: 1;*/ if you want to space the links out within it's parent element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Puggy Adventure Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        body{
            background-color: rgb(237, 227, 227);
        }
        header{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            background-color: rgb(31 31 31);
        }
        h1{
            color:rgb(182, 21, 185);
            font-style: italic;
            padding: 0 2rem;
        }
        nav{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            /*flex: 1;*/
        }
        nav > a{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.5rem 2rem;
            font-size: 1rem;
            text-decoration: none;
            color:rgb(222, 222, 222);
            font-family: sans-serif;
            transition: all ease-in 0.2s;
        }
        nav > a:hover{
            color: rgb(240 40 240);
        }
        #featuredImage{
            height: 200px; width: auto;
        }
        main{
            display: flex;
            flex-direction: column;
            align-content: center;
            margin: 1rem 2rem
        }
        main section{
            display: flex;
            flex-direction: row;
            justify-content: center;
            background: rgb(220, 213, 213);
            border-radius: 4px;
            margin: 0.25rem;
            padding: 1rem;
        }
        .multi-section div{
            padding: 1rem;
            background: rgb(228, 228, 228);
            margin: 0.25rem;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<header>
    <h1><strong>Puggy Adventures</strong></h1>
    <nav>
        <a href="/home">Home</a>
        <a href="/news">News</a>
        <a href="/support">Support</a>
        <a href="/about">About</a>
    </nav>
</header>
<main>
    <section>
        <h2>Storyline</h2>
    </section>
    <section class="multi-section">
        <div>
            <img src="https://ichef.bbci.co.uk/news/976/cpsprodpb/17638/production/_124800859_gettyimages-817514614.jpg.webp" id="featuredImage">
        </div>
        <div>
            <p><strong>The Puggy Adventure offers a school-friendly experince which is designed to keep you entertained for hours! Our team of professionals with google slides know how to make you have the best experince possible while playing our game! This year the puggy adventure is mostly in 1st person POV! along with some 3D models being injected into the game.</strong></p>
        </div>
    </section>
    <section>
        <iframe src="https://www.youtube.com/embed/VJEVxYyTFRI"></iframe>
    </section>
</main>
<script src="index.js"></script>
</body>
</html>