HTML/CSS/JS - pomik zgornjega menija

Izdelujem spletno stran in mi težavo delata dve zadevi - centriranje div-a in pomik zgornjega menija - topbara.

CENTRIRANJE KOLUMNE PO VIŠINI IN ŠIRINI
Tu rešujem z ročnim paddingom in marginom, ampak to ni to. Centiram pa samo tekst (class="naslov"), ne pa celega okna. Ali imam napačno zastavljene div-e?
Če povečam višino topbara na npr. 150x in dam takole, ni nič drugače.

.zgornja-vrstica {
    text-align: left;
    margin-top: 20px;
    border-color: green;
    vertical-align: middle;
    
}

Izpade takole:



HTML

    <div class="topnav fixed-top border">
        <div class="zgornja-vrstica row border">
            <div class="ikona icon col-1 border"><i class="fas fa-palette"></i></div>
            <div class="naslov col-3 border">Naslov</div>
            <div class="items col-6 border">
                <ul class="items nav border">
                    <li class="nav-item"><a href="Domov.html" class="active nav-link border">Domov</a></li>
                    <li class="nav-item"><a href=" " class="nav-link">Člani</a></li>
                    <li class="nav-item"><a href=" " class="nav-link">Obvestila</a></li>
                    <li class="nav-item"><a href=" " class="nav-link">Galerija</a></li>
                    <li class="nav-item"><a href=" " class="nav-link">Nagrade</a></li>
                    <li class="nav-item"><a href=" " class="nav-link">Zgodovina</a></li>
                    <li class="nav-item"><a href=" " class="nav-link">Kontakt</a></li>
                </ul>
            </div>
        </div>

CSS

body {
}

* {
    box-sizing: border-box;
}

.topnav {
    color: white;
    min-height: 100px;
    background-image: linear-gradient(to right, #243858, lightblue);
}



.nav-link {
    color: white;
}

.items {
    text-align: center;
    margin: auto;
    font-size: 25px;
    

}

.zgornja-vrstica {
    text-align: left;
    margin-top: 20px;
    border-color: green;
    
}

.ikona {
    text-align: right;
    font-size: 40px; 
}



.naslov {
    text-align: left;
    position: center;
    margin: auto;
    font-size: 30px;
    font-weight: bold;
}

.topnav a:hover {
    background-color: aliceblue;
    border-radius: 10px;
    color: black;
    font-weight: bold;
    transition: 0.5s;
}

.tekst {
    margin-top: 150px;
    
}

POMIK TOPBARA

Tu imam pa zraven še JS:

window.onscroll = function () { scrollFunction() };

function scrollFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("topnav").style.fontSize = "30px";
    } else {
        document.getElementById("topnav").style.fontSize = "40px";
    }
}

Kakršen koli odgovor mi bo v pomoč.

Hvala.

Centriranje naslova: div je privzeto 100% širine. Lahko mu nastaviš fix širino (npr. 200px) in margin auto, potem div (ne besedilo) postavi v sredino strani, še bolj elegantno pa je dat text-align: center, da je besedilo točno v sredini.
Za pozicioniranje elementov v meniju maš 100 načinov, ampak danes se uporablja flexbox.
Rešen primer, s par designerskimi popravki (lepši font, brez gradienta za boljšo berljivost,...), ki je povrhu še responsive za tablet in mobile maš tu: https://jsfiddle.net/926svgjm/3/