[SOLVED] Why is there a border at the top of my html page

Why is there a border at the top of my html page

I am very new to HTML, having picked it up to work with electron. I have created my initial screen however I cannot figure out why there is a bar at the top of the screen, i.e. the title & selection are not at the top.

    .menu-selector ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 25%;
        height: 100%;
        background-color: #c4c4c4;
        text-align:center;
        position: fixed;
        overflow: auto;
    }


    #myList a{
         display: block;
         color: #000;
         padding-bottom: 0;
         text-decoration: none;
         padding-top: 20%;
         padding-bottom: 20%;
    }

    #myList : last-child {
        border-bottom: none;
    }


    #myList a:hover:not(.active) {
        background-color: #555;
        color: white;
    }

    #myList a.active {
         background-color: #4CAF50;
         color: white;
    }

    body {background-color: #828c9b;}

    .title {
        width = 40%;
        height = 40%;
        padding-left: 38%;
        background-color: #254982;
        display: block;
        border-color: #254982;
    }


    h1 {
         text-align: center;
    }

<!DOCTYPE html>
    <html>
        <head>
            <link class="menu-bar" rel="stylesheet" href="../css/index.css">
            <link class="container" rel="stylesheet" href="../css/menu.css">
            <meta charset="utf-8">
            <title>Cipher Program</title>
                <style>
                    body {margin: 0; padding-top: 0; border-top: 0}

                </style>
        </head>

        <body>
            <div class="menu-selector">
            <ul>
                    <li id="myList"><a class="active" href="index.html"> Menu </a></li>
                    <li id="myList"><a href="ceaser.html">Ceaser Cipher</a></li>
                    <li id="myList"><a href="vernam.html">Vernam Cipher </a></li>
                    <li id="myList"><a href="frequency.html">Frequency Analysis</a></li>
            </ul>
            </div>


            <!-- Page Content -->
            <div class="title">
                <h1> Welcome to Cipher Program </h1>

            </div>

            <div class="ceaser">
                <h2>Menu </h2>
                
            </div>
        </body>
    </html>

Solution

Change your h1 CSS as follows:

h1 {
     text-align: center;
     margin-top: 0;
}

The problem is with the user agent stylesheet that automatically assigns some margin to your h1.

What you should do in your CSS files is to have a boilerplate so-called CSS Reset at the beginning of you CSS file to make sure that your HTML looks the same across all browsers and then style the margin etc. as needed.