Navbar with higher margin when adding position:Bsolute; in a text

Question

Good morning, everyone. When I change the position of the text to the top of the site to position:absolute; My Nav bar gets a slight margin at the top. how can I fix this ?

var TxtType = function(el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
};

TxtType.prototype.tick = function() {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];

    if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

    var that = this;
    var delta = 200 - Math.random() * 100;

    if (this.isDeleting) { delta /= 2; }

    if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
    } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
    }

    setTimeout(function() {
        that.tick();
    }, delta);
};

window.onload = function() {
    var elements = document.getElementsByClassName('typewrite');
    for (var i=0; i<elements.length; i++) {
        var toRotate = elements[i].getAttribute('data-type');
        var period = elements[i].getAttribute('data-period');
        if (toRotate) {
            new TxtType(elements[i], JSON.parse(toRotate), period);
        }
    }
    // INJECT CSS
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
    document.body.appendChild(css);
};

/* MENU*/

// Menu-toggle button

$(document).ready(function() {
    $(".menu-icon").on("click", function() {
        $("nav ul").toggleClass("showing");
    });
});

// Scrolling Effect

$(window).on("scroll", function() {
    if($(window).scrollTop()) {
        $('nav').addClass('black');
    }

    else {
        $('nav').removeClass('black');
    }
})

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;
}
/* ========================= MENU ========================= */
header {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-image: url("../img/cover.jpeg");}
#topo {
z-index: -2;
}
#topo img{
    width: 100%;
    z-index: -1;
}

main {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}

.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
    z-index: 6;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    text-align: right;
    margin: 0;
    padding: 0 40px 0 0;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;

}
nav ul li a a:hover {
    text-decoration: none;
    color: #8b8b8b;

}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}
/* ========================= TEXTO DO TOPO ========================= */

#texto-topo p{
    font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
    position:absolute;
    font-size: 50px;
    color: white;
    height: 100%;
    min-height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    left: 10%;
    right: 10%;
    font-weight:bold;
}

<!-- == MENU == -->
    <div class="wrapper">
        <header>
            <nav>
                <div class="menu-icon">
                    <i class="fa fa-bars fa-2x"></i>
                </div>
                <div class="logo">
                    LOGO
                </div>
                <div class="menu">
                    <ul>
                        <li><a href="#">INICIO</a></li>
                        <li><a href="#">SOBRE MIM</a></li>
                        <li><a href="#">PORTIFOLIO</a></li>
                        <li><a href="#">CONTATO</a></li>
                    </ul>
                </div>
            </nav>
            <!-- == TEXTO DO TOPO ==-->
            <div id="texto-topo">
            <h1>
                <p href="" class="typewrite" data-period="2000" data-type='[ "OLÁ, MEU NOME É JOÃO DIVINO.", "SOU DESENVOLVEDOR WEB FRONT-END", "AMO DESENVOLVER", "TENHO UM PÉ NO DESING" ]'>
                    <span class="wrap"></span>
                </p>
            </h1>
            </div>
            <script>

            </script>
        </header>
    </div>

Answer 1

Face your problem is the margin element default <h1>

To fix put this in your CSS

.tit {
    margin: 0;
}

And this in the html tag

<h1 class="tit"> ... <h1>

Now go paste at the top of the browser window can test ai!